diff --git a/apps/v4/app/(create)/components/picker.tsx b/apps/v4/app/(create)/components/picker.tsx
index 1a4e7e009b..a8563110a2 100644
--- a/apps/v4/app/(create)/components/picker.tsx
+++ b/apps/v4/app/(create)/components/picker.tsx
@@ -80,7 +80,7 @@ function PickerLabel({
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        "text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8",
+        "text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8",
         className
       )}
       {...props}
@@ -103,7 +103,7 @@ function PickerItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 pointer-coarse:py-2.5 pointer-coarse:pl-3 pointer-coarse:text-base [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-8 pointer-coarse:py-2.5 pointer-coarse:pl-3 pointer-coarse:text-base [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -128,7 +128,7 @@ function PickerSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-inset:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -180,7 +180,7 @@ function PickerCheckboxItem({
     <MenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none 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}
@@ -220,7 +220,7 @@ function PickerRadioItem({
     <MenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-lg py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 pointer-coarse:gap-3 pointer-coarse:py-2.5 pointer-coarse:pl-3 pointer-coarse:text-base [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-lg py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 pointer-coarse:gap-3 pointer-coarse:py-2.5 pointer-coarse:pl-3 pointer-coarse:text-base [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/accordion.tsx b/apps/v4/examples/base/ui-rtl/accordion.tsx
index 8e0e34d020..137cb191fd 100644
--- a/apps/v4/examples/base/ui-rtl/accordion.tsx
+++ b/apps/v4/examples/base/ui-rtl/accordion.tsx
@@ -35,7 +35,7 @@ function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-start text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:size-4",
+          "focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-start text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:size-4",
           className
         )}
         {...props}
diff --git a/apps/v4/examples/base/ui-rtl/breadcrumb.tsx b/apps/v4/examples/base/ui-rtl/breadcrumb.tsx
index d61d6bb05b..91a3e1df89 100644
--- a/apps/v4/examples/base/ui-rtl/breadcrumb.tsx
+++ b/apps/v4/examples/base/ui-rtl/breadcrumb.tsx
@@ -21,7 +21,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
     <ol
       data-slot="breadcrumb-list"
       className={cn(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words",
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/button-group.tsx b/apps/v4/examples/base/ui-rtl/button-group.tsx
index b91d02b710..b5eab407a6 100644
--- a/apps/v4/examples/base/ui-rtl/button-group.tsx
+++ b/apps/v4/examples/base/ui-rtl/button-group.tsx
@@ -5,14 +5,14 @@ import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
 
 const buttonGroupVariants = cva(
-  "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-lg flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-lg flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
     variants: {
       orientation: {
         horizontal:
-          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-lg! [&>[data-slot]~[data-slot]]:rounded-s-none [&>[data-slot]~[data-slot]]:border-s-0 [&>[data-slot]]:rounded-e-none",
+          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-e-lg! [&>[data-slot]~[data-slot]]:rounded-s-none [&>[data-slot]~[data-slot]]:border-s-0 *:data-slot:rounded-e-none",
         vertical:
-          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 [&>[data-slot]]:rounded-b-none",
+          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 *:data-slot:rounded-b-none",
       },
     },
     defaultVariants: {
@@ -70,7 +70,7 @@ function ButtonGroupSeparator({
       data-slot="button-group-separator"
       orientation={orientation}
       className={cn(
-        "bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto",
+        "bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/button.tsx b/apps/v4/examples/base/ui-rtl/button.tsx
index 3f60035167..7348869c09 100644
--- a/apps/v4/examples/base/ui-rtl/button.tsx
+++ b/apps/v4/examples/base/ui-rtl/button.tsx
@@ -5,7 +5,7 @@ import { Button as ButtonPrimitive } from "@base-ui/react/button"
 import { cva, type VariantProps } from "class-variance-authority"
 
 const buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
   {
     variants: {
       variant: {
diff --git a/apps/v4/examples/base/ui-rtl/calendar.tsx b/apps/v4/examples/base/ui-rtl/calendar.tsx
index 4ce08f09fb..5186c9496e 100644
--- a/apps/v4/examples/base/ui-rtl/calendar.tsx
+++ b/apps/v4/examples/base/ui-rtl/calendar.tsx
@@ -31,7 +31,7 @@ function Calendar({
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        "bg-background group/calendar p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        "bg-background group/calendar p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] 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
@@ -110,12 +110,12 @@ function Calendar({
           defaultClassNames.day
         ),
         range_start: cn(
-          "rounded-s-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:end-0 -z-0 isolate",
+          "rounded-s-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:end-0 z-0 isolate",
           defaultClassNames.range_start
         ),
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn(
-          "rounded-e-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:start-0 -z-0 isolate",
+          "rounded-e-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:start-0 z-0 isolate",
           defaultClassNames.range_end
         ),
         today: cn(
diff --git a/apps/v4/examples/base/ui-rtl/chart.tsx b/apps/v4/examples/base/ui-rtl/chart.tsx
index 35feff3fa3..bdb6daafe9 100644
--- a/apps/v4/examples/base/ui-rtl/chart.tsx
+++ b/apps/v4/examples/base/ui-rtl/chart.tsx
@@ -172,7 +172,7 @@ function ChartTooltipContent({
   return (
     <div
       className={cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        "border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
         className
       )}
     >
diff --git a/apps/v4/examples/base/ui-rtl/checkbox.tsx b/apps/v4/examples/base/ui-rtl/checkbox.tsx
index ad69f21295..4b86a4c7b8 100644
--- a/apps/v4/examples/base/ui-rtl/checkbox.tsx
+++ b/apps/v4/examples/base/ui-rtl/checkbox.tsx
@@ -10,7 +10,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px]",
+        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/combobox.tsx b/apps/v4/examples/base/ui-rtl/combobox.tsx
index b930985e50..2266cc7454 100644
--- a/apps/v4/examples/base/ui-rtl/combobox.tsx
+++ b/apps/v4/examples/base/ui-rtl/combobox.tsx
@@ -157,7 +157,7 @@ function ComboboxItem({
     <ComboboxPrimitive.Item
       data-slot="combobox-item"
       className={cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -245,7 +245,7 @@ function ComboboxChips({
     <ComboboxPrimitive.Chips
       data-slot="combobox-chips"
       className={cn(
-        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1",
+        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/command.tsx b/apps/v4/examples/base/ui-rtl/command.tsx
index 0f4aab2d5f..cbf14425da 100644
--- a/apps/v4/examples/base/ui-rtl/command.tsx
+++ b/apps/v4/examples/base/ui-rtl/command.tsx
@@ -130,7 +130,7 @@ function CommandGroup({
     <CommandPrimitive.Group
       data-slot="command-group"
       className={cn(
-        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        "text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium",
         className
       )}
       {...props}
@@ -160,7 +160,7 @@ function CommandItem({
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-lg!",
+        "data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -172,7 +172,7 @@ function CommandItem({
         hugeicons="Tick02Icon"
         phosphor="CheckIcon"
         remixicon="RiCheckLine"
-        className="ms-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
+        className="ms-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
       />
     </CommandPrimitive.Item>
   )
diff --git a/apps/v4/examples/base/ui-rtl/context-menu.tsx b/apps/v4/examples/base/ui-rtl/context-menu.tsx
index 9d5ca06de5..b7025e9282 100644
--- a/apps/v4/examples/base/ui-rtl/context-menu.tsx
+++ b/apps/v4/examples/base/ui-rtl/context-menu.tsx
@@ -81,7 +81,7 @@ function ContextMenuLabel({
       data-slot="context-menu-label"
       data-inset={inset}
       className={cn(
-        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:ps-8",
+        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:ps-7",
         className
       )}
       {...props}
@@ -104,7 +104,7 @@ function ContextMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -131,7 +131,7 @@ function ContextMenuSubTrigger({
       data-slot="context-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -166,13 +166,17 @@ function ContextMenuCheckboxItem({
   className,
   children,
   checked,
+  inset,
   ...props
-}: ContextMenuPrimitive.CheckboxItem.Props) {
+}: ContextMenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
   return (
     <ContextMenuPrimitive.CheckboxItem
       data-slot="context-menu-checkbox-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -208,13 +212,17 @@ function ContextMenuRadioGroup({
 function ContextMenuRadioItem({
   className,
   children,
+  inset,
   ...props
-}: ContextMenuPrimitive.RadioItem.Props) {
+}: ContextMenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
   return (
     <ContextMenuPrimitive.RadioItem
       data-slot="context-menu-radio-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/dropdown-menu.tsx b/apps/v4/examples/base/ui-rtl/dropdown-menu.tsx
index a5cd59f2cc..9b454d9f10 100644
--- a/apps/v4/examples/base/ui-rtl/dropdown-menu.tsx
+++ b/apps/v4/examples/base/ui-rtl/dropdown-menu.tsx
@@ -68,7 +68,7 @@ function DropdownMenuLabel({
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:ps-8",
+        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:ps-7",
         className
       )}
       {...props}
@@ -91,7 +91,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -116,7 +116,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -162,13 +162,17 @@ function DropdownMenuCheckboxItem({
   className,
   children,
   checked,
+  inset,
   ...props
-}: MenuPrimitive.CheckboxItem.Props) {
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
   return (
     <MenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -205,13 +209,17 @@ function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
 function DropdownMenuRadioItem({
   className,
   children,
+  inset,
   ...props
-}: MenuPrimitive.RadioItem.Props) {
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
   return (
     <MenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/field.tsx b/apps/v4/examples/base/ui-rtl/field.tsx
index 77d1bb4ab7..3d4ed83c10 100644
--- a/apps/v4/examples/base/ui-rtl/field.tsx
+++ b/apps/v4/examples/base/ui-rtl/field.tsx
@@ -42,7 +42,7 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-group"
       className={cn(
-        "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",
+        "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",
         className
       )}
       {...props}
@@ -55,11 +55,11 @@ const fieldVariants = cva(
   {
     variants: {
       orientation: {
-        vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
         horizontal:
-          "flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+          "flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
         responsive:
-          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+          "flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
       },
     },
     defaultVariants: {
@@ -105,7 +105,7 @@ function FieldLabel({
     <Label
       data-slot="field-label"
       className={cn(
-        "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2.5",
+        "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
         className
       )}
@@ -132,7 +132,7 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="field-description"
       className={cn(
-        "text-muted-foreground text-start text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "text-muted-foreground text-start text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
         "last:mt-0 nth-last-2:-mt-1",
         "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
         className
diff --git a/apps/v4/examples/base/ui-rtl/input-group.tsx b/apps/v4/examples/base/ui-rtl/input-group.tsx
index ae4c5123b0..923ddece1e 100644
--- a/apps/v4/examples/base/ui-rtl/input-group.tsx
+++ b/apps/v4/examples/base/ui-rtl/input-group.tsx
@@ -13,7 +13,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="input-group"
       role="group"
       className={cn(
-        "border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] 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 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0",
+        "border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 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 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/input-otp.tsx b/apps/v4/examples/base/ui-rtl/input-otp.tsx
index ef85d0ebe2..e4a22d0780 100644
--- a/apps/v4/examples/base/ui-rtl/input-otp.tsx
+++ b/apps/v4/examples/base/ui-rtl/input-otp.tsx
@@ -32,7 +32,7 @@ function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="input-otp-group"
       className={cn(
-        "has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-lg has-aria-invalid:ring-[3px]",
+        "has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-lg has-aria-invalid:ring-3",
         className
       )}
       {...props}
@@ -55,7 +55,7 @@ function InputOTPSlot({
       data-slot="input-otp-slot"
       data-active={isActive}
       className={cn(
-        "dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-8 items-center justify-center border-y border-e text-sm transition-all outline-none first:rounded-s-lg first:border-s last:rounded-e-lg data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+        "dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-8 items-center justify-center border-y border-e text-sm transition-all outline-none first:rounded-s-lg first:border-s last:rounded-e-lg data-[active=true]:z-10 data-[active=true]:ring-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/input.tsx b/apps/v4/examples/base/ui-rtl/input.tsx
index 55e68099e1..b0bb6d3a71 100644
--- a/apps/v4/examples/base/ui-rtl/input.tsx
+++ b/apps/v4/examples/base/ui-rtl/input.tsx
@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] md:text-sm",
+        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/item.tsx b/apps/v4/examples/base/ui-rtl/item.tsx
index 0f3ed50828..39a2da011e 100644
--- a/apps/v4/examples/base/ui-rtl/item.tsx
+++ b/apps/v4/examples/base/ui-rtl/item.tsx
@@ -11,7 +11,7 @@ function ItemGroup({ className, ...props }: React.ComponentProps<"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",
+        "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}
@@ -45,7 +45,7 @@ const itemVariants = cva(
       size: {
         default: "gap-2.5 px-3 py-2.5",
         sm: "gap-2.5 px-3 py-2.5",
-        xs: "gap-2 px-2.5 py-2 [[data-slot=dropdown-menu-content]_&]:p-0",
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
       },
     },
     defaultVariants: {
@@ -80,7 +80,7 @@ function Item({
 }
 
 const itemMediaVariants = cva(
-  "gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
+  "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
   {
     variants: {
       variant: {
diff --git a/apps/v4/examples/base/ui-rtl/kbd.tsx b/apps/v4/examples/base/ui-rtl/kbd.tsx
index 9e34a07c9f..1d73b67985 100644
--- a/apps/v4/examples/base/ui-rtl/kbd.tsx
+++ b/apps/v4/examples/base/ui-rtl/kbd.tsx
@@ -5,7 +5,7 @@ function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
     <kbd
       data-slot="kbd"
       className={cn(
-        "bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3",
+        "bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/menubar.tsx b/apps/v4/examples/base/ui-rtl/menubar.tsx
index 0391592923..af060467ae 100644
--- a/apps/v4/examples/base/ui-rtl/menubar.tsx
+++ b/apps/v4/examples/base/ui-rtl/menubar.tsx
@@ -101,7 +101,7 @@ function MenubarItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm data-[disabled]:opacity-50 data-[inset]:ps-8 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:ps-7 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -113,13 +113,17 @@ function MenubarCheckboxItem({
   className,
   children,
   checked,
+  inset,
   ...props
-}: MenuPrimitive.CheckboxItem.Props) {
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
   return (
     <MenuPrimitive.CheckboxItem
       data-slot="menubar-checkbox-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-7 pe-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-7 pe-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       checked={checked}
@@ -150,13 +154,17 @@ function MenubarRadioGroup({
 function MenubarRadioItem({
   className,
   children,
+  inset,
   ...props
-}: MenuPrimitive.RadioItem.Props) {
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
   return (
     <MenuPrimitive.RadioItem
       data-slot="menubar-radio-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-7 pe-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-7 pe-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -181,13 +189,15 @@ function MenubarLabel({
   className,
   inset,
   ...props
-}: React.ComponentProps<typeof DropdownMenuLabel>) {
+}: React.ComponentProps<typeof DropdownMenuLabel> & {
+  inset?: boolean
+}) {
   return (
     <DropdownMenuLabel
       data-slot="menubar-label"
       data-inset={inset}
       className={cn(
-        "px-1.5 py-1 text-sm font-medium data-[inset]:ps-8",
+        "px-1.5 py-1 text-sm font-medium data-inset:ps-7",
         className
       )}
       {...props}
@@ -242,7 +252,7 @@ function MenubarSubTrigger({
       data-slot="menubar-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-[inset]:ps-8 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:ps-7 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/native-select.tsx b/apps/v4/examples/base/ui-rtl/native-select.tsx
index e5c3cf8f62..08f3346006 100644
--- a/apps/v4/examples/base/ui-rtl/native-select.tsx
+++ b/apps/v4/examples/base/ui-rtl/native-select.tsx
@@ -24,7 +24,7 @@ function NativeSelect({
       <select
         data-slot="native-select"
         data-size={size}
-        className="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 ps-2.5 pe-8 text-sm transition-colors outline-none select-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-[3px] data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5"
+        className="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 ps-2.5 pe-8 text-sm transition-colors outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5"
         {...props}
       />
       <IconPlaceholder
diff --git a/apps/v4/examples/base/ui-rtl/navigation-menu.tsx b/apps/v4/examples/base/ui-rtl/navigation-menu.tsx
index a20d71971f..b7b487c660 100644
--- a/apps/v4/examples/base/ui-rtl/navigation-menu.tsx
+++ b/apps/v4/examples/base/ui-rtl/navigation-menu.tsx
@@ -56,7 +56,7 @@ function NavigationMenuItem({
 }
 
 const navigationMenuTriggerStyle = cva(
-  "bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none"
+  "bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none"
 )
 
 function NavigationMenuTrigger({
@@ -77,7 +77,7 @@ function NavigationMenuTrigger({
         hugeicons="ArrowDown01Icon"
         phosphor="CaretDownIcon"
         remixicon="RiArrowDownSLine"
-        className="relative top-[1px] ms-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
+        className="relative top-px ms-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
         aria-hidden="true"
       />
     </NavigationMenuPrimitive.Trigger>
@@ -92,7 +92,7 @@ function NavigationMenuContent({
     <NavigationMenuPrimitive.Content
       data-slot="navigation-menu-content"
       className={cn(
-        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-[ending-style]:opacity-0 data-[ending-style]:data-[activation-direction=left]:translate-x-[50%] data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%] **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none data-[starting-style]:opacity-0 data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] data-[starting-style]:data-[activation-direction=right]:translate-x-[50%] rtl:data-[ending-style]:data-[activation-direction=left]:-translate-x-[50%] rtl:data-[ending-style]:data-[activation-direction=right]:-translate-x-[-50%] rtl:data-[starting-style]:data-[activation-direction=left]:-translate-x-[-50%] rtl:data-[starting-style]:data-[activation-direction=right]:-translate-x-[50%]",
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 data-ending-style:data-activation-direction=left:translate-x-[50%] rtl:data-ending-style:data-activation-direction=left:-translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] rtl:data-ending-style:data-activation-direction=right:-translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] rtl:data-starting-style:data-activation-direction=left:-translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] rtl:data-starting-style:data-activation-direction=right:-translate-x-[50%] h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
         className
       )}
       {...props}
@@ -116,12 +116,12 @@ function NavigationMenuPositioner({
         align={align}
         alignOffset={alignOffset}
         className={cn(
-          "isolate z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-300 duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-[instant]:transition-none data-[side=bottom]:before:start-0 data-[side=bottom]:before:end-0 data-[side=bottom]:before:top-[-10px]",
+          "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-300 duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:start-0 data-[side=bottom]:before:end-0 data-[side=bottom]:before:top-[-10px]",
           className
         )}
         {...props}
       >
-        <NavigationMenuPrimitive.Popup className="bg-popover text-popover-foreground ring-foreground/10 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg shadow ring-1 transition-[opacity,transform,width,height,scale,translate] transition-all 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.Popup className="bg-popover text-popover-foreground ring-foreground/10 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg shadow ring-1 transition-[opacity,transform,width,height,scale,translate] transition-all 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>
@@ -137,7 +137,7 @@ function NavigationMenuLink({
     <NavigationMenuPrimitive.Link
       data-slot="navigation-menu-link"
       className={cn(
-        "data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 [[data-slot=navigation-menu-content]_&]:rounded-md",
+        "data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -153,7 +153,7 @@ function NavigationMenuIndicator({
     <NavigationMenuPrimitive.Icon
       data-slot="navigation-menu-indicator"
       className={cn(
-        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/radio-group.tsx b/apps/v4/examples/base/ui-rtl/radio-group.tsx
index 32e5fb5938..384a08d8e4 100644
--- a/apps/v4/examples/base/ui-rtl/radio-group.tsx
+++ b/apps/v4/examples/base/ui-rtl/radio-group.tsx
@@ -21,7 +21,7 @@ function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
     <RadioPrimitive.Root
       data-slot="radio-group-item"
       className={cn(
-        "border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px]",
+        "border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/select.tsx b/apps/v4/examples/base/ui-rtl/select.tsx
index 3b9957b313..acd6807fca 100644
--- a/apps/v4/examples/base/ui-rtl/select.tsx
+++ b/apps/v4/examples/base/ui-rtl/select.tsx
@@ -41,7 +41,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 ps-2.5 pe-2 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *: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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 ps-2.5 pe-2 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *: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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -127,7 +127,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none 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",
+        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none 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}
diff --git a/apps/v4/examples/base/ui-rtl/separator.tsx b/apps/v4/examples/base/ui-rtl/separator.tsx
index 56cb4d8ce4..6fd796cc06 100644
--- a/apps/v4/examples/base/ui-rtl/separator.tsx
+++ b/apps/v4/examples/base/ui-rtl/separator.tsx
@@ -13,7 +13,7 @@ function Separator({
       data-slot="separator"
       orientation={orientation}
       className={cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
+        "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/slider.tsx b/apps/v4/examples/base/ui-rtl/slider.tsx
index ab1d8c5190..7525b902d6 100644
--- a/apps/v4/examples/base/ui-rtl/slider.tsx
+++ b/apps/v4/examples/base/ui-rtl/slider.tsx
@@ -47,7 +47,7 @@ function Slider({
           <SliderPrimitive.Thumb
             data-slot="slider-thumb"
             key={index}
-            className="border-ring ring-ring/50 relative block size-3 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-[3px] focus-visible:ring-[3px] focus-visible:outline-hidden active:ring-[3px] disabled:pointer-events-none disabled:opacity-50"
+            className="border-ring ring-ring/50 relative block size-3 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
           />
         ))}
       </SliderPrimitive.Control>
diff --git a/apps/v4/examples/base/ui-rtl/switch.tsx b/apps/v4/examples/base/ui-rtl/switch.tsx
index e4f06e5c7a..2dd753b1e6 100644
--- a/apps/v4/examples/base/ui-rtl/switch.tsx
+++ b/apps/v4/examples/base/ui-rtl/switch.tsx
@@ -15,7 +15,7 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-[3px] aria-invalid:ring-[3px] data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]",
+        "data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/tabs.tsx b/apps/v4/examples/base/ui-rtl/tabs.tsx
index 1861042064..12629da537 100644
--- a/apps/v4/examples/base/ui-rtl/tabs.tsx
+++ b/apps/v4/examples/base/ui-rtl/tabs.tsx
@@ -14,7 +14,7 @@ function Tabs({
       data-slot="tabs"
       data-orientation={orientation}
       className={cn(
-        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        "group/tabs flex gap-2 data-horizontal:flex-col",
         className
       )}
       {...props}
@@ -23,7 +23,7 @@ function Tabs({
 }
 
 const tabsListVariants = cva(
-  "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
   {
     variants: {
       variant: {
@@ -57,10 +57,10 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
-        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-end-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        "after:bg-foreground after:absolute 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:-end-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/textarea.tsx b/apps/v4/examples/base/ui-rtl/textarea.tsx
index 92810bde44..8e9d74ac3d 100644
--- a/apps/v4/examples/base/ui-rtl/textarea.tsx
+++ b/apps/v4/examples/base/ui-rtl/textarea.tsx
@@ -6,7 +6,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] md:text-sm",
+        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/toggle-group.tsx b/apps/v4/examples/base/ui-rtl/toggle-group.tsx
index 6ed91fa674..f9753e5f37 100644
--- a/apps/v4/examples/base/ui-rtl/toggle-group.tsx
+++ b/apps/v4/examples/base/ui-rtl/toggle-group.tsx
@@ -41,7 +41,7 @@ function ToggleGroup({
       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))] rounded-lg data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[size=sm]:rounded-[min(var(--radius-md),10px)]",
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-vertical:flex-col data-vertical:items-stretch data-[size=sm]:rounded-[min(var(--radius-md),10px)]",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui-rtl/tooltip.tsx b/apps/v4/examples/base/ui-rtl/tooltip.tsx
index 2919568bc5..88a772cca5 100644
--- a/apps/v4/examples/base/ui-rtl/tooltip.tsx
+++ b/apps/v4/examples/base/ui-rtl/tooltip.tsx
@@ -59,7 +59,7 @@ function TooltipContent({
           {...props}
         >
           {children}
-          <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=inline-end]:-start-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:-end-1 data-[side=inline-start]:top-1/2! 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.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=inline-end]:-start-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:-end-1 data-[side=inline-start]:top-1/2! 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>
diff --git a/apps/v4/examples/base/ui/accordion.tsx b/apps/v4/examples/base/ui/accordion.tsx
index d91fe146b8..5f7ed2c630 100644
--- a/apps/v4/examples/base/ui/accordion.tsx
+++ b/apps/v4/examples/base/ui/accordion.tsx
@@ -35,7 +35,7 @@ function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4",
+          "focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4",
           className
         )}
         {...props}
diff --git a/apps/v4/examples/base/ui/breadcrumb.tsx b/apps/v4/examples/base/ui/breadcrumb.tsx
index 69c66e0462..ad87c85769 100644
--- a/apps/v4/examples/base/ui/breadcrumb.tsx
+++ b/apps/v4/examples/base/ui/breadcrumb.tsx
@@ -21,7 +21,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
     <ol
       data-slot="breadcrumb-list"
       className={cn(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words",
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/button-group.tsx b/apps/v4/examples/base/ui/button-group.tsx
index 66607758ea..d88f45f02c 100644
--- a/apps/v4/examples/base/ui/button-group.tsx
+++ b/apps/v4/examples/base/ui/button-group.tsx
@@ -5,14 +5,14 @@ import { useRender } from "@base-ui/react/use-render"
 import { cva, type VariantProps } from "class-variance-authority"
 
 const buttonGroupVariants = cva(
-  "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
     variants: {
       orientation: {
         horizontal:
-          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 [&>[data-slot]]:rounded-r-none",
+          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 *:data-slot:rounded-r-none",
         vertical:
-          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 [&>[data-slot]]:rounded-b-none",
+          "[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 *:data-slot:rounded-b-none",
       },
     },
     defaultVariants: {
@@ -70,7 +70,7 @@ function ButtonGroupSeparator({
       data-slot="button-group-separator"
       orientation={orientation}
       className={cn(
-        "bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=vertical]:h-auto",
+        "bg-input relative self-stretch data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/button.tsx b/apps/v4/examples/base/ui/button.tsx
index 1c65d8a38f..199432ecb0 100644
--- a/apps/v4/examples/base/ui/button.tsx
+++ b/apps/v4/examples/base/ui/button.tsx
@@ -5,7 +5,7 @@ import { Button as ButtonPrimitive } from "@base-ui/react/button"
 import { cva, type VariantProps } from "class-variance-authority"
 
 const buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
   {
     variants: {
       variant: {
diff --git a/apps/v4/examples/base/ui/calendar.tsx b/apps/v4/examples/base/ui/calendar.tsx
index 32248859b6..356364d00c 100644
--- a/apps/v4/examples/base/ui/calendar.tsx
+++ b/apps/v4/examples/base/ui/calendar.tsx
@@ -31,7 +31,7 @@ function Calendar({
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        "bg-background group/calendar p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        "bg-background group/calendar p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] 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
@@ -110,12 +110,12 @@ function Calendar({
           defaultClassNames.day
         ),
         range_start: cn(
-          "rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate",
+          "rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate",
           defaultClassNames.range_start
         ),
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn(
-          "rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate",
+          "rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate",
           defaultClassNames.range_end
         ),
         today: cn(
diff --git a/apps/v4/examples/base/ui/chart.tsx b/apps/v4/examples/base/ui/chart.tsx
index 35feff3fa3..bdb6daafe9 100644
--- a/apps/v4/examples/base/ui/chart.tsx
+++ b/apps/v4/examples/base/ui/chart.tsx
@@ -172,7 +172,7 @@ function ChartTooltipContent({
   return (
     <div
       className={cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        "border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
         className
       )}
     >
diff --git a/apps/v4/examples/base/ui/checkbox.tsx b/apps/v4/examples/base/ui/checkbox.tsx
index ad69f21295..4b86a4c7b8 100644
--- a/apps/v4/examples/base/ui/checkbox.tsx
+++ b/apps/v4/examples/base/ui/checkbox.tsx
@@ -10,7 +10,7 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px]",
+        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/combobox.tsx b/apps/v4/examples/base/ui/combobox.tsx
index 2ca6362d57..9ec6f46b6a 100644
--- a/apps/v4/examples/base/ui/combobox.tsx
+++ b/apps/v4/examples/base/ui/combobox.tsx
@@ -157,7 +157,7 @@ function ComboboxItem({
     <ComboboxPrimitive.Item
       data-slot="combobox-item"
       className={cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -245,7 +245,7 @@ function ComboboxChips({
     <ComboboxPrimitive.Chips
       data-slot="combobox-chips"
       className={cn(
-        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1",
+        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/command.tsx b/apps/v4/examples/base/ui/command.tsx
index 399b582dca..2d1771d0da 100644
--- a/apps/v4/examples/base/ui/command.tsx
+++ b/apps/v4/examples/base/ui/command.tsx
@@ -130,7 +130,7 @@ function CommandGroup({
     <CommandPrimitive.Group
       data-slot="command-group"
       className={cn(
-        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        "text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium",
         className
       )}
       {...props}
@@ -160,7 +160,7 @@ function CommandItem({
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-lg!",
+        "data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -172,7 +172,7 @@ function CommandItem({
         hugeicons="Tick02Icon"
         phosphor="CheckIcon"
         remixicon="RiCheckLine"
-        className="ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
+        className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
       />
     </CommandPrimitive.Item>
   )
diff --git a/apps/v4/examples/base/ui/context-menu.tsx b/apps/v4/examples/base/ui/context-menu.tsx
index 398ada5386..a96e621989 100644
--- a/apps/v4/examples/base/ui/context-menu.tsx
+++ b/apps/v4/examples/base/ui/context-menu.tsx
@@ -81,7 +81,7 @@ function ContextMenuLabel({
       data-slot="context-menu-label"
       data-inset={inset}
       className={cn(
-        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:pl-8",
+        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7",
         className
       )}
       {...props}
@@ -104,7 +104,7 @@ function ContextMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -131,7 +131,7 @@ function ContextMenuSubTrigger({
       data-slot="context-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -166,13 +166,17 @@ function ContextMenuCheckboxItem({
   className,
   children,
   checked,
+  inset,
   ...props
-}: ContextMenuPrimitive.CheckboxItem.Props) {
+}: ContextMenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
   return (
     <ContextMenuPrimitive.CheckboxItem
       data-slot="context-menu-checkbox-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -208,13 +212,17 @@ function ContextMenuRadioGroup({
 function ContextMenuRadioItem({
   className,
   children,
+  inset,
   ...props
-}: ContextMenuPrimitive.RadioItem.Props) {
+}: ContextMenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
   return (
     <ContextMenuPrimitive.RadioItem
       data-slot="context-menu-radio-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/dropdown-menu.tsx b/apps/v4/examples/base/ui/dropdown-menu.tsx
index 40b8ea9deb..a089a66199 100644
--- a/apps/v4/examples/base/ui/dropdown-menu.tsx
+++ b/apps/v4/examples/base/ui/dropdown-menu.tsx
@@ -68,7 +68,7 @@ function DropdownMenuLabel({
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:pl-8",
+        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7",
         className
       )}
       {...props}
@@ -91,7 +91,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -116,7 +116,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -162,13 +162,17 @@ function DropdownMenuCheckboxItem({
   className,
   children,
   checked,
+  inset,
   ...props
-}: MenuPrimitive.CheckboxItem.Props) {
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
   return (
     <MenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -205,13 +209,17 @@ function DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {
 function DropdownMenuRadioItem({
   className,
   children,
+  inset,
   ...props
-}: MenuPrimitive.RadioItem.Props) {
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
   return (
     <MenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/field.tsx b/apps/v4/examples/base/ui/field.tsx
index 497835b22d..7841a528ff 100644
--- a/apps/v4/examples/base/ui/field.tsx
+++ b/apps/v4/examples/base/ui/field.tsx
@@ -42,7 +42,7 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-group"
       className={cn(
-        "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",
+        "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",
         className
       )}
       {...props}
@@ -55,11 +55,11 @@ const fieldVariants = cva(
   {
     variants: {
       orientation: {
-        vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
         horizontal:
-          "flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+          "flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
         responsive:
-          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+          "flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
       },
     },
     defaultVariants: {
@@ -105,7 +105,7 @@ function FieldLabel({
     <Label
       data-slot="field-label"
       className={cn(
-        "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2.5",
+        "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
         className
       )}
@@ -132,7 +132,7 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="field-description"
       className={cn(
-        "text-muted-foreground text-left text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "text-muted-foreground text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
         "last:mt-0 nth-last-2:-mt-1",
         "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
         className
diff --git a/apps/v4/examples/base/ui/input-group.tsx b/apps/v4/examples/base/ui/input-group.tsx
index f9655289e0..5898dfc1eb 100644
--- a/apps/v4/examples/base/ui/input-group.tsx
+++ b/apps/v4/examples/base/ui/input-group.tsx
@@ -13,7 +13,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="input-group"
       role="group"
       className={cn(
-        "border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] 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 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0",
+        "border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 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 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/input-otp.tsx b/apps/v4/examples/base/ui/input-otp.tsx
index d696e06130..8b48a1767f 100644
--- a/apps/v4/examples/base/ui/input-otp.tsx
+++ b/apps/v4/examples/base/ui/input-otp.tsx
@@ -32,7 +32,7 @@ function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="input-otp-group"
       className={cn(
-        "has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-lg has-aria-invalid:ring-[3px]",
+        "has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-lg has-aria-invalid:ring-3",
         className
       )}
       {...props}
@@ -55,7 +55,7 @@ function InputOTPSlot({
       data-slot="input-otp-slot"
       data-active={isActive}
       className={cn(
-        "dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-8 items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+        "dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-8 items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:z-10 data-[active=true]:ring-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/input.tsx b/apps/v4/examples/base/ui/input.tsx
index 55e68099e1..b0bb6d3a71 100644
--- a/apps/v4/examples/base/ui/input.tsx
+++ b/apps/v4/examples/base/ui/input.tsx
@@ -8,7 +8,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] md:text-sm",
+        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/item.tsx b/apps/v4/examples/base/ui/item.tsx
index d22a6d884b..b284ad6dd1 100644
--- a/apps/v4/examples/base/ui/item.tsx
+++ b/apps/v4/examples/base/ui/item.tsx
@@ -11,7 +11,7 @@ function ItemGroup({ className, ...props }: React.ComponentProps<"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",
+        "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}
@@ -45,7 +45,7 @@ const itemVariants = cva(
       size: {
         default: "gap-2.5 px-3 py-2.5",
         sm: "gap-2.5 px-3 py-2.5",
-        xs: "gap-2 px-2.5 py-2 [[data-slot=dropdown-menu-content]_&]:p-0",
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
       },
     },
     defaultVariants: {
@@ -80,7 +80,7 @@ function Item({
 }
 
 const itemMediaVariants = cva(
-  "gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
+  "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
   {
     variants: {
       variant: {
diff --git a/apps/v4/examples/base/ui/kbd.tsx b/apps/v4/examples/base/ui/kbd.tsx
index 9e34a07c9f..1d73b67985 100644
--- a/apps/v4/examples/base/ui/kbd.tsx
+++ b/apps/v4/examples/base/ui/kbd.tsx
@@ -5,7 +5,7 @@ function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
     <kbd
       data-slot="kbd"
       className={cn(
-        "bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3",
+        "bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/menubar.tsx b/apps/v4/examples/base/ui/menubar.tsx
index 5678f19bee..a36c87b975 100644
--- a/apps/v4/examples/base/ui/menubar.tsx
+++ b/apps/v4/examples/base/ui/menubar.tsx
@@ -101,7 +101,7 @@ function MenubarItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground group/menubar-item gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -113,13 +113,17 @@ function MenubarCheckboxItem({
   className,
   children,
   checked,
+  inset,
   ...props
-}: MenuPrimitive.CheckboxItem.Props) {
+}: MenuPrimitive.CheckboxItem.Props & {
+  inset?: boolean
+}) {
   return (
     <MenuPrimitive.CheckboxItem
       data-slot="menubar-checkbox-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       checked={checked}
@@ -150,13 +154,17 @@ function MenubarRadioGroup({
 function MenubarRadioItem({
   className,
   children,
+  inset,
   ...props
-}: MenuPrimitive.RadioItem.Props) {
+}: MenuPrimitive.RadioItem.Props & {
+  inset?: boolean
+}) {
   return (
     <MenuPrimitive.RadioItem
       data-slot="menubar-radio-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -181,13 +189,15 @@ function MenubarLabel({
   className,
   inset,
   ...props
-}: React.ComponentProps<typeof DropdownMenuLabel>) {
+}: React.ComponentProps<typeof DropdownMenuLabel> & {
+  inset?: boolean
+}) {
   return (
     <DropdownMenuLabel
       data-slot="menubar-label"
       data-inset={inset}
       className={cn(
-        "px-1.5 py-1 text-sm font-medium data-[inset]:pl-8",
+        "px-1.5 py-1 text-sm font-medium data-inset:pl-7",
         className
       )}
       {...props}
@@ -242,7 +252,7 @@ function MenubarSubTrigger({
       data-slot="menubar-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/native-select.tsx b/apps/v4/examples/base/ui/native-select.tsx
index 3ee8eb351b..978fded5ae 100644
--- a/apps/v4/examples/base/ui/native-select.tsx
+++ b/apps/v4/examples/base/ui/native-select.tsx
@@ -24,7 +24,7 @@ function NativeSelect({
       <select
         data-slot="native-select"
         data-size={size}
-        className="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-[3px] data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5"
+        className="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5"
         {...props}
       />
       <IconPlaceholder
diff --git a/apps/v4/examples/base/ui/navigation-menu.tsx b/apps/v4/examples/base/ui/navigation-menu.tsx
index 99429e9f64..98e917221a 100644
--- a/apps/v4/examples/base/ui/navigation-menu.tsx
+++ b/apps/v4/examples/base/ui/navigation-menu.tsx
@@ -56,7 +56,7 @@ function NavigationMenuItem({
 }
 
 const navigationMenuTriggerStyle = cva(
-  "bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none"
+  "bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none"
 )
 
 function NavigationMenuTrigger({
@@ -77,7 +77,7 @@ function NavigationMenuTrigger({
         hugeicons="ArrowDown01Icon"
         phosphor="CaretDownIcon"
         remixicon="RiArrowDownSLine"
-        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
+        className="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
         aria-hidden="true"
       />
     </NavigationMenuPrimitive.Trigger>
@@ -92,7 +92,7 @@ function NavigationMenuContent({
     <NavigationMenuPrimitive.Content
       data-slot="navigation-menu-content"
       className={cn(
-        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 h-full w-auto p-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-[ending-style]:opacity-0 data-[ending-style]:data-[activation-direction=left]:translate-x-[50%] data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%] **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none data-[starting-style]:opacity-0 data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] data-[starting-style]:data-[activation-direction=right]:translate-x-[50%]",
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 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-1 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
         className
       )}
       {...props}
@@ -116,12 +116,12 @@ function NavigationMenuPositioner({
         align={align}
         alignOffset={alignOffset}
         className={cn(
-          "isolate z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-300 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",
+          "isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-300 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="bg-popover text-popover-foreground ring-foreground/10 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg shadow ring-1 transition-[opacity,transform,width,height,scale,translate] transition-all 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.Popup className="bg-popover text-popover-foreground ring-foreground/10 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-lg shadow ring-1 transition-[opacity,transform,width,height,scale,translate] transition-all 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>
@@ -137,7 +137,7 @@ function NavigationMenuLink({
     <NavigationMenuPrimitive.Link
       data-slot="navigation-menu-link"
       className={cn(
-        "data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 [[data-slot=navigation-menu-content]_&]:rounded-md",
+        "data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -153,7 +153,7 @@ function NavigationMenuIndicator({
     <NavigationMenuPrimitive.Icon
       data-slot="navigation-menu-indicator"
       className={cn(
-        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/radio-group.tsx b/apps/v4/examples/base/ui/radio-group.tsx
index 2030eefa96..bb7daa3b1e 100644
--- a/apps/v4/examples/base/ui/radio-group.tsx
+++ b/apps/v4/examples/base/ui/radio-group.tsx
@@ -21,7 +21,7 @@ function RadioGroupItem({ className, ...props }: RadioPrimitive.Root.Props) {
     <RadioPrimitive.Root
       data-slot="radio-group-item"
       className={cn(
-        "border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px]",
+        "border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/select.tsx b/apps/v4/examples/base/ui/select.tsx
index eed097860f..ee1780a58b 100644
--- a/apps/v4/examples/base/ui/select.tsx
+++ b/apps/v4/examples/base/ui/select.tsx
@@ -41,7 +41,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *: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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *: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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -127,7 +127,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none 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",
+        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none 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}
diff --git a/apps/v4/examples/base/ui/separator.tsx b/apps/v4/examples/base/ui/separator.tsx
index 56cb4d8ce4..6fd796cc06 100644
--- a/apps/v4/examples/base/ui/separator.tsx
+++ b/apps/v4/examples/base/ui/separator.tsx
@@ -13,7 +13,7 @@ function Separator({
       data-slot="separator"
       orientation={orientation}
       className={cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
+        "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/slider.tsx b/apps/v4/examples/base/ui/slider.tsx
index ab1d8c5190..7525b902d6 100644
--- a/apps/v4/examples/base/ui/slider.tsx
+++ b/apps/v4/examples/base/ui/slider.tsx
@@ -47,7 +47,7 @@ function Slider({
           <SliderPrimitive.Thumb
             data-slot="slider-thumb"
             key={index}
-            className="border-ring ring-ring/50 relative block size-3 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-[3px] focus-visible:ring-[3px] focus-visible:outline-hidden active:ring-[3px] disabled:pointer-events-none disabled:opacity-50"
+            className="border-ring ring-ring/50 relative block size-3 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
           />
         ))}
       </SliderPrimitive.Control>
diff --git a/apps/v4/examples/base/ui/switch.tsx b/apps/v4/examples/base/ui/switch.tsx
index 24d4fe7946..b4ec84706e 100644
--- a/apps/v4/examples/base/ui/switch.tsx
+++ b/apps/v4/examples/base/ui/switch.tsx
@@ -15,7 +15,7 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-[3px] aria-invalid:ring-[3px] data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]",
+        "data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/tabs.tsx b/apps/v4/examples/base/ui/tabs.tsx
index 872d47702d..69b615dcec 100644
--- a/apps/v4/examples/base/ui/tabs.tsx
+++ b/apps/v4/examples/base/ui/tabs.tsx
@@ -14,7 +14,7 @@ function Tabs({
       data-slot="tabs"
       data-orientation={orientation}
       className={cn(
-        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        "group/tabs flex gap-2 data-horizontal:flex-col",
         className
       )}
       {...props}
@@ -23,7 +23,7 @@ function Tabs({
 }
 
 const tabsListVariants = cva(
-  "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
   {
     variants: {
       variant: {
@@ -57,10 +57,10 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
-        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        "after:bg-foreground after:absolute 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}
diff --git a/apps/v4/examples/base/ui/textarea.tsx b/apps/v4/examples/base/ui/textarea.tsx
index 92810bde44..8e9d74ac3d 100644
--- a/apps/v4/examples/base/ui/textarea.tsx
+++ b/apps/v4/examples/base/ui/textarea.tsx
@@ -6,7 +6,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] md:text-sm",
+        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/toggle-group.tsx b/apps/v4/examples/base/ui/toggle-group.tsx
index 31bdd8ad79..754fe9f0f1 100644
--- a/apps/v4/examples/base/ui/toggle-group.tsx
+++ b/apps/v4/examples/base/ui/toggle-group.tsx
@@ -41,7 +41,7 @@ function ToggleGroup({
       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))] rounded-lg data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[size=sm]:rounded-[min(var(--radius-md),10px)]",
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-vertical:flex-col data-vertical:items-stretch data-[size=sm]:rounded-[min(var(--radius-md),10px)]",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/base/ui/tooltip.tsx b/apps/v4/examples/base/ui/tooltip.tsx
index 53f64c5845..d99ea84c0f 100644
--- a/apps/v4/examples/base/ui/tooltip.tsx
+++ b/apps/v4/examples/base/ui/tooltip.tsx
@@ -59,7 +59,7 @@ function TooltipContent({
           {...props}
         >
           {children}
-          <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 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-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.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 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-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>
diff --git a/apps/v4/examples/radix/ui-rtl/accordion.tsx b/apps/v4/examples/radix/ui-rtl/accordion.tsx
index a3ef469002..67dd65094c 100644
--- a/apps/v4/examples/radix/ui-rtl/accordion.tsx
+++ b/apps/v4/examples/radix/ui-rtl/accordion.tsx
@@ -42,7 +42,7 @@ function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-start text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:size-4",
+          "focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-start text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ms-auto **:data-[slot=accordion-trigger-icon]:size-4",
           className
         )}
         {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/breadcrumb.tsx b/apps/v4/examples/radix/ui-rtl/breadcrumb.tsx
index 4f98013e63..f58258c6bf 100644
--- a/apps/v4/examples/radix/ui-rtl/breadcrumb.tsx
+++ b/apps/v4/examples/radix/ui-rtl/breadcrumb.tsx
@@ -20,7 +20,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
     <ol
       data-slot="breadcrumb-list"
       className={cn(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words",
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/button-group.tsx b/apps/v4/examples/radix/ui-rtl/button-group.tsx
index ddf790377a..8d38bb79a9 100644
--- a/apps/v4/examples/radix/ui-rtl/button-group.tsx
+++ b/apps/v4/examples/radix/ui-rtl/button-group.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "radix-ui"
 
 const buttonGroupVariants = cva(
-  "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-lg flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-e-lg flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
     variants: {
       orientation: {
diff --git a/apps/v4/examples/radix/ui-rtl/button.tsx b/apps/v4/examples/radix/ui-rtl/button.tsx
index ad843c6c29..13c9247c91 100644
--- a/apps/v4/examples/radix/ui-rtl/button.tsx
+++ b/apps/v4/examples/radix/ui-rtl/button.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "radix-ui"
 
 const buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
   {
     variants: {
       variant: {
diff --git a/apps/v4/examples/radix/ui-rtl/calendar.tsx b/apps/v4/examples/radix/ui-rtl/calendar.tsx
index 5d11ceb978..e2301c58dc 100644
--- a/apps/v4/examples/radix/ui-rtl/calendar.tsx
+++ b/apps/v4/examples/radix/ui-rtl/calendar.tsx
@@ -31,7 +31,7 @@ function Calendar({
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        "bg-background group/calendar p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        "bg-background group/calendar p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] 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
@@ -110,12 +110,12 @@ function Calendar({
           defaultClassNames.day
         ),
         range_start: cn(
-          "rounded-s-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:end-0 -z-0 isolate",
+          "rounded-s-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:end-0 z-0 isolate",
           defaultClassNames.range_start
         ),
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn(
-          "rounded-e-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:start-0 -z-0 isolate",
+          "rounded-e-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:start-0 z-0 isolate",
           defaultClassNames.range_end
         ),
         today: cn(
diff --git a/apps/v4/examples/radix/ui-rtl/chart.tsx b/apps/v4/examples/radix/ui-rtl/chart.tsx
index 09f77157c5..352d5a7ace 100644
--- a/apps/v4/examples/radix/ui-rtl/chart.tsx
+++ b/apps/v4/examples/radix/ui-rtl/chart.tsx
@@ -172,7 +172,7 @@ function ChartTooltipContent({
   return (
     <div
       className={cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        "border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
         className
       )}
     >
diff --git a/apps/v4/examples/radix/ui-rtl/checkbox.tsx b/apps/v4/examples/radix/ui-rtl/checkbox.tsx
index 27249261e5..f85e66673c 100644
--- a/apps/v4/examples/radix/ui-rtl/checkbox.tsx
+++ b/apps/v4/examples/radix/ui-rtl/checkbox.tsx
@@ -14,7 +14,7 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px]",
+        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/combobox.tsx b/apps/v4/examples/radix/ui-rtl/combobox.tsx
index a153983297..9b5ba64a7c 100644
--- a/apps/v4/examples/radix/ui-rtl/combobox.tsx
+++ b/apps/v4/examples/radix/ui-rtl/combobox.tsx
@@ -159,7 +159,7 @@ function ComboboxItem({
     <ComboboxPrimitive.Item
       data-slot="combobox-item"
       className={cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -247,7 +247,7 @@ function ComboboxChips({
     <ComboboxPrimitive.Chips
       data-slot="combobox-chips"
       className={cn(
-        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1",
+        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/command.tsx b/apps/v4/examples/radix/ui-rtl/command.tsx
index ed855cb975..5cd305f729 100644
--- a/apps/v4/examples/radix/ui-rtl/command.tsx
+++ b/apps/v4/examples/radix/ui-rtl/command.tsx
@@ -132,7 +132,7 @@ function CommandGroup({
     <CommandPrimitive.Group
       data-slot="command-group"
       className={cn(
-        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        "text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium",
         className
       )}
       {...props}
@@ -162,7 +162,7 @@ function CommandItem({
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-lg!",
+        "data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -174,7 +174,7 @@ function CommandItem({
         hugeicons="Tick02Icon"
         phosphor="CheckIcon"
         remixicon="RiCheckLine"
-        className="ms-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
+        className="ms-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
       />
     </CommandPrimitive.Item>
   )
diff --git a/apps/v4/examples/radix/ui-rtl/context-menu.tsx b/apps/v4/examples/radix/ui-rtl/context-menu.tsx
index 735b78c35a..f48d5baeb1 100644
--- a/apps/v4/examples/radix/ui-rtl/context-menu.tsx
+++ b/apps/v4/examples/radix/ui-rtl/context-menu.tsx
@@ -93,7 +93,7 @@ function ContextMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -114,7 +114,7 @@ function ContextMenuSubTrigger({
       data-slot="context-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -152,13 +152,17 @@ function ContextMenuCheckboxItem({
   className,
   children,
   checked,
+  inset,
   ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
   return (
     <ContextMenuPrimitive.CheckboxItem
       data-slot="context-menu-checkbox-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -183,13 +187,17 @@ function ContextMenuCheckboxItem({
 function ContextMenuRadioItem({
   className,
   children,
+  inset,
   ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
   return (
     <ContextMenuPrimitive.RadioItem
       data-slot="context-menu-radio-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -222,7 +230,7 @@ function ContextMenuLabel({
       data-slot="context-menu-label"
       data-inset={inset}
       className={cn(
-        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:ps-8",
+        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:ps-7",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/dropdown-menu.tsx b/apps/v4/examples/radix/ui-rtl/dropdown-menu.tsx
index 40cbeae166..1ee9ec3e41 100644
--- a/apps/v4/examples/radix/ui-rtl/dropdown-menu.tsx
+++ b/apps/v4/examples/radix/ui-rtl/dropdown-menu.tsx
@@ -76,7 +76,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -88,13 +88,17 @@ function DropdownMenuCheckboxItem({
   className,
   children,
   checked,
+  inset,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
   return (
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -133,13 +137,17 @@ function DropdownMenuRadioGroup({
 function DropdownMenuRadioItem({
   className,
   children,
+  inset,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
   return (
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -175,7 +183,7 @@ function DropdownMenuLabel({
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:ps-8",
+        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:ps-7",
         className
       )}
       {...props}
@@ -231,7 +239,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/field.tsx b/apps/v4/examples/radix/ui-rtl/field.tsx
index 8d1156677b..1942b55420 100644
--- a/apps/v4/examples/radix/ui-rtl/field.tsx
+++ b/apps/v4/examples/radix/ui-rtl/field.tsx
@@ -42,7 +42,7 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-group"
       className={cn(
-        "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",
+        "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",
         className
       )}
       {...props}
@@ -55,11 +55,11 @@ const fieldVariants = cva(
   {
     variants: {
       orientation: {
-        vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
         horizontal:
-          "flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+          "flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
         responsive:
-          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+          "flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
       },
     },
     defaultVariants: {
@@ -105,7 +105,7 @@ function FieldLabel({
     <Label
       data-slot="field-label"
       className={cn(
-        "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2.5",
+        "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
         className
       )}
@@ -132,7 +132,7 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="field-description"
       className={cn(
-        "text-muted-foreground text-start text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "text-muted-foreground text-start text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
         "last:mt-0 nth-last-2:-mt-1",
         "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
         className
diff --git a/apps/v4/examples/radix/ui-rtl/input-group.tsx b/apps/v4/examples/radix/ui-rtl/input-group.tsx
index 117a04e26c..33c63b86e8 100644
--- a/apps/v4/examples/radix/ui-rtl/input-group.tsx
+++ b/apps/v4/examples/radix/ui-rtl/input-group.tsx
@@ -13,7 +13,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="input-group"
       role="group"
       className={cn(
-        "border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] 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 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0",
+        "border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 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 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pe-1.5 has-[>[data-align=inline-start]]:[&>input]:ps-1.5",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/input-otp.tsx b/apps/v4/examples/radix/ui-rtl/input-otp.tsx
index 0b83a73f76..28d15efb0c 100644
--- a/apps/v4/examples/radix/ui-rtl/input-otp.tsx
+++ b/apps/v4/examples/radix/ui-rtl/input-otp.tsx
@@ -32,7 +32,7 @@ function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="input-otp-group"
       className={cn(
-        "has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-lg has-aria-invalid:ring-[3px]",
+        "has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-lg has-aria-invalid:ring-3",
         className
       )}
       {...props}
@@ -55,7 +55,7 @@ function InputOTPSlot({
       data-slot="input-otp-slot"
       data-active={isActive}
       className={cn(
-        "dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-8 items-center justify-center border-y border-e text-sm transition-all outline-none first:rounded-s-lg first:border-s last:rounded-e-lg data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+        "dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-8 items-center justify-center border-y border-e text-sm transition-all outline-none first:rounded-s-lg first:border-s last:rounded-e-lg data-[active=true]:z-10 data-[active=true]:ring-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/input.tsx b/apps/v4/examples/radix/ui-rtl/input.tsx
index a2208a3829..952f743a92 100644
--- a/apps/v4/examples/radix/ui-rtl/input.tsx
+++ b/apps/v4/examples/radix/ui-rtl/input.tsx
@@ -7,7 +7,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] md:text-sm",
+        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/item.tsx b/apps/v4/examples/radix/ui-rtl/item.tsx
index 11e2090a2e..9d94035a31 100644
--- a/apps/v4/examples/radix/ui-rtl/item.tsx
+++ b/apps/v4/examples/radix/ui-rtl/item.tsx
@@ -10,7 +10,7 @@ function ItemGroup({ className, ...props }: React.ComponentProps<"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",
+        "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}
@@ -44,7 +44,7 @@ const itemVariants = cva(
       size: {
         default: "gap-2.5 px-3 py-2.5",
         sm: "gap-2.5 px-3 py-2.5",
-        xs: "gap-2 px-2.5 py-2 [[data-slot=dropdown-menu-content]_&]:p-0",
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
       },
     },
     defaultVariants: {
@@ -75,7 +75,7 @@ function Item({
 }
 
 const itemMediaVariants = cva(
-  "gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
+  "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
   {
     variants: {
       variant: {
diff --git a/apps/v4/examples/radix/ui-rtl/kbd.tsx b/apps/v4/examples/radix/ui-rtl/kbd.tsx
index 9e31c48190..d99543b959 100644
--- a/apps/v4/examples/radix/ui-rtl/kbd.tsx
+++ b/apps/v4/examples/radix/ui-rtl/kbd.tsx
@@ -5,7 +5,7 @@ function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
     <kbd
       data-slot="kbd"
       className={cn(
-        "bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3",
+        "bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/menubar.tsx b/apps/v4/examples/radix/ui-rtl/menubar.tsx
index 22a737fdd0..84cea9938d 100644
--- a/apps/v4/examples/radix/ui-rtl/menubar.tsx
+++ b/apps/v4/examples/radix/ui-rtl/menubar.tsx
@@ -103,7 +103,7 @@ function MenubarItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/menubar-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:ps-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground group/menubar-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -115,13 +115,17 @@ function MenubarCheckboxItem({
   className,
   children,
   checked,
+  inset,
   ...props
-}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
   return (
     <MenubarPrimitive.CheckboxItem
       data-slot="menubar-checkbox-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-7 pe-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-7 pe-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       checked={checked}
@@ -146,13 +150,17 @@ function MenubarCheckboxItem({
 function MenubarRadioItem({
   className,
   children,
+  inset,
   ...props
-}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
   return (
     <MenubarPrimitive.RadioItem
       data-slot="menubar-radio-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-7 pe-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 ps-7 pe-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:ps-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -185,7 +193,7 @@ function MenubarLabel({
       data-slot="menubar-label"
       data-inset={inset}
       className={cn(
-        "px-1.5 py-1 text-sm font-medium data-[inset]:ps-8",
+        "px-1.5 py-1 text-sm font-medium data-inset:ps-7",
         className
       )}
       {...props}
@@ -241,7 +249,7 @@ function MenubarSubTrigger({
       data-slot="menubar-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none select-none data-[inset]:ps-8 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none select-none data-inset:ps-7 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/native-select.tsx b/apps/v4/examples/radix/ui-rtl/native-select.tsx
index b6620ef71c..ed937815b8 100644
--- a/apps/v4/examples/radix/ui-rtl/native-select.tsx
+++ b/apps/v4/examples/radix/ui-rtl/native-select.tsx
@@ -24,7 +24,7 @@ function NativeSelect({
       <select
         data-slot="native-select"
         data-size={size}
-        className="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 ps-2.5 pe-8 text-sm transition-colors outline-none select-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-[3px] data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5"
+        className="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 ps-2.5 pe-8 text-sm transition-colors outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5"
         {...props}
       />
       <IconPlaceholder
diff --git a/apps/v4/examples/radix/ui-rtl/navigation-menu.tsx b/apps/v4/examples/radix/ui-rtl/navigation-menu.tsx
index 20a53b8de6..fe7cb44eac 100644
--- a/apps/v4/examples/radix/ui-rtl/navigation-menu.tsx
+++ b/apps/v4/examples/radix/ui-rtl/navigation-menu.tsx
@@ -59,7 +59,7 @@ function NavigationMenuItem({
 }
 
 const navigationMenuTriggerStyle = cva(
-  "bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none"
+  "bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none"
 )
 
 function NavigationMenuTrigger({
@@ -80,7 +80,7 @@ function NavigationMenuTrigger({
         hugeicons="ArrowDown01Icon"
         phosphor="CaretDownIcon"
         remixicon="RiArrowDownSLine"
-        className="relative top-[1px] ms-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
+        className="relative top-px ms-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
         aria-hidden="true"
       />
     </NavigationMenuPrimitive.Trigger>
@@ -116,7 +116,7 @@ function NavigationMenuViewport({
       <NavigationMenuPrimitive.Viewport
         data-slot="navigation-menu-viewport"
         className={cn(
-          "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-lg shadow ring-1 duration-100 md:w-[var(--radix-navigation-menu-viewport-width)]",
+          "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-lg shadow ring-1 duration-100 md:w-(--radix-navigation-menu-viewport-width)",
           className
         )}
         {...props}
@@ -133,7 +133,7 @@ function NavigationMenuLink({
     <NavigationMenuPrimitive.Link
       data-slot="navigation-menu-link"
       className={cn(
-        "data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 [[data-slot=navigation-menu-content]_&]:rounded-md",
+        "data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -149,7 +149,7 @@ function NavigationMenuIndicator({
     <NavigationMenuPrimitive.Indicator
       data-slot="navigation-menu-indicator"
       className={cn(
-        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/radio-group.tsx b/apps/v4/examples/radix/ui-rtl/radio-group.tsx
index f9fa174d19..0c25871c1b 100644
--- a/apps/v4/examples/radix/ui-rtl/radio-group.tsx
+++ b/apps/v4/examples/radix/ui-rtl/radio-group.tsx
@@ -27,7 +27,7 @@ function RadioGroupItem({
     <RadioGroupPrimitive.Item
       data-slot="radio-group-item"
       className={cn(
-        "border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px]",
+        "border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/select.tsx b/apps/v4/examples/radix/ui-rtl/select.tsx
index 0469647923..39f60b8f21 100644
--- a/apps/v4/examples/radix/ui-rtl/select.tsx
+++ b/apps/v4/examples/radix/ui-rtl/select.tsx
@@ -44,7 +44,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 ps-2.5 pe-2 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *: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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 ps-2.5 pe-2 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *: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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -90,7 +90,7 @@ function SelectContent({
         <SelectPrimitive.Viewport
           data-position={position}
           className={cn(
-            "data-[position=popper]:h-[var(--radix-select-trigger-height)] data-[position=popper]:w-full data-[position=popper]:min-w-[var(--radix-select-trigger-width)]",
+            "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
             position === "popper" && ""
           )}
         >
@@ -124,7 +124,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none 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",
+        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 ps-1.5 pe-8 text-sm outline-hidden select-none 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}
diff --git a/apps/v4/examples/radix/ui-rtl/separator.tsx b/apps/v4/examples/radix/ui-rtl/separator.tsx
index 336dd15436..5d2038a84c 100644
--- a/apps/v4/examples/radix/ui-rtl/separator.tsx
+++ b/apps/v4/examples/radix/ui-rtl/separator.tsx
@@ -16,7 +16,7 @@ function Separator({
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
+        "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/slider.tsx b/apps/v4/examples/radix/ui-rtl/slider.tsx
index c95ea2426b..ce60ce281a 100644
--- a/apps/v4/examples/radix/ui-rtl/slider.tsx
+++ b/apps/v4/examples/radix/ui-rtl/slider.tsx
@@ -48,7 +48,7 @@ function Slider({
         <SliderPrimitive.Thumb
           data-slot="slider-thumb"
           key={index}
-          className="border-ring ring-ring/50 relative block size-3 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-[3px] focus-visible:ring-[3px] focus-visible:outline-hidden active:ring-[3px] disabled:pointer-events-none disabled:opacity-50"
+          className="border-ring ring-ring/50 relative block size-3 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
         />
       ))}
     </SliderPrimitive.Root>
diff --git a/apps/v4/examples/radix/ui-rtl/switch.tsx b/apps/v4/examples/radix/ui-rtl/switch.tsx
index e52251ccb0..fb844e4844 100644
--- a/apps/v4/examples/radix/ui-rtl/switch.tsx
+++ b/apps/v4/examples/radix/ui-rtl/switch.tsx
@@ -16,7 +16,7 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-[3px] aria-invalid:ring-[3px] data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]",
+        "data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/tabs.tsx b/apps/v4/examples/radix/ui-rtl/tabs.tsx
index 0a15985ec0..314725382c 100644
--- a/apps/v4/examples/radix/ui-rtl/tabs.tsx
+++ b/apps/v4/examples/radix/ui-rtl/tabs.tsx
@@ -15,7 +15,7 @@ function Tabs({
       data-slot="tabs"
       data-orientation={orientation}
       className={cn(
-        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        "group/tabs flex gap-2 data-horizontal:flex-col",
         className
       )}
       {...props}
@@ -24,7 +24,7 @@ function Tabs({
 }
 
 const tabsListVariants = cva(
-  "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
   {
     variants: {
       variant: {
@@ -62,10 +62,10 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
-        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-end-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        "after:bg-foreground after:absolute 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:-end-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/textarea.tsx b/apps/v4/examples/radix/ui-rtl/textarea.tsx
index d60d20d490..5b3cf28626 100644
--- a/apps/v4/examples/radix/ui-rtl/textarea.tsx
+++ b/apps/v4/examples/radix/ui-rtl/textarea.tsx
@@ -6,7 +6,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] md:text-sm",
+        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/toggle-group.tsx b/apps/v4/examples/radix/ui-rtl/toggle-group.tsx
index e1c6143e64..030063bdeb 100644
--- a/apps/v4/examples/radix/ui-rtl/toggle-group.tsx
+++ b/apps/v4/examples/radix/ui-rtl/toggle-group.tsx
@@ -40,7 +40,7 @@ function ToggleGroup({
       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))] rounded-lg data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[size=sm]:rounded-[min(var(--radius-md),10px)]",
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-vertical:flex-col data-vertical:items-stretch data-[size=sm]:rounded-[min(var(--radius-md),10px)]",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui-rtl/tooltip.tsx b/apps/v4/examples/radix/ui-rtl/tooltip.tsx
index c2f027206b..7b043395fe 100644
--- a/apps/v4/examples/radix/ui-rtl/tooltip.tsx
+++ b/apps/v4/examples/radix/ui-rtl/tooltip.tsx
@@ -51,7 +51,7 @@ function TooltipContent({
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )
diff --git a/apps/v4/examples/radix/ui/accordion.tsx b/apps/v4/examples/radix/ui/accordion.tsx
index 0d50ab829b..47f450f84c 100644
--- a/apps/v4/examples/radix/ui/accordion.tsx
+++ b/apps/v4/examples/radix/ui/accordion.tsx
@@ -42,7 +42,7 @@ function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4",
+          "focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-3 disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4",
           className
         )}
         {...props}
diff --git a/apps/v4/examples/radix/ui/breadcrumb.tsx b/apps/v4/examples/radix/ui/breadcrumb.tsx
index 95c2a447db..07e429c33b 100644
--- a/apps/v4/examples/radix/ui/breadcrumb.tsx
+++ b/apps/v4/examples/radix/ui/breadcrumb.tsx
@@ -20,7 +20,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
     <ol
       data-slot="breadcrumb-list"
       className={cn(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words",
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/button-group.tsx b/apps/v4/examples/radix/ui/button-group.tsx
index bb4d73bb2e..87cb45de1c 100644
--- a/apps/v4/examples/radix/ui/button-group.tsx
+++ b/apps/v4/examples/radix/ui/button-group.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "radix-ui"
 
 const buttonGroupVariants = cva(
-  "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  "has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
     variants: {
       orientation: {
diff --git a/apps/v4/examples/radix/ui/button.tsx b/apps/v4/examples/radix/ui/button.tsx
index 1f5a3a6798..59cc130dc9 100644
--- a/apps/v4/examples/radix/ui/button.tsx
+++ b/apps/v4/examples/radix/ui/button.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { Slot } from "radix-ui"
 
 const buttonVariants = cva(
-  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
   {
     variants: {
       variant: {
diff --git a/apps/v4/examples/radix/ui/calendar.tsx b/apps/v4/examples/radix/ui/calendar.tsx
index 85f364fd89..5bc8e54fb9 100644
--- a/apps/v4/examples/radix/ui/calendar.tsx
+++ b/apps/v4/examples/radix/ui/calendar.tsx
@@ -31,7 +31,7 @@ function Calendar({
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        "bg-background group/calendar p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        "bg-background group/calendar p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] 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
@@ -110,12 +110,12 @@ function Calendar({
           defaultClassNames.day
         ),
         range_start: cn(
-          "rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate",
+          "rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate",
           defaultClassNames.range_start
         ),
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
         range_end: cn(
-          "rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate",
+          "rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate",
           defaultClassNames.range_end
         ),
         today: cn(
diff --git a/apps/v4/examples/radix/ui/chart.tsx b/apps/v4/examples/radix/ui/chart.tsx
index 09f77157c5..352d5a7ace 100644
--- a/apps/v4/examples/radix/ui/chart.tsx
+++ b/apps/v4/examples/radix/ui/chart.tsx
@@ -172,7 +172,7 @@ function ChartTooltipContent({
   return (
     <div
       className={cn(
-        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+        "border-border/50 bg-background grid min-w-32 items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
         className
       )}
     >
diff --git a/apps/v4/examples/radix/ui/checkbox.tsx b/apps/v4/examples/radix/ui/checkbox.tsx
index 27249261e5..f85e66673c 100644
--- a/apps/v4/examples/radix/ui/checkbox.tsx
+++ b/apps/v4/examples/radix/ui/checkbox.tsx
@@ -14,7 +14,7 @@ function Checkbox({
     <CheckboxPrimitive.Root
       data-slot="checkbox"
       className={cn(
-        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px]",
+        "border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border transition-colors outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/combobox.tsx b/apps/v4/examples/radix/ui/combobox.tsx
index d1c3f9ee48..5283e2d099 100644
--- a/apps/v4/examples/radix/ui/combobox.tsx
+++ b/apps/v4/examples/radix/ui/combobox.tsx
@@ -159,7 +159,7 @@ function ComboboxItem({
     <ComboboxPrimitive.Item
       data-slot="combobox-item"
       className={cn(
-        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -247,7 +247,7 @@ function ComboboxChips({
     <ComboboxPrimitive.Chips
       data-slot="combobox-chips"
       className={cn(
-        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1",
+        "dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/command.tsx b/apps/v4/examples/radix/ui/command.tsx
index 35031e3bd0..cdc19bb047 100644
--- a/apps/v4/examples/radix/ui/command.tsx
+++ b/apps/v4/examples/radix/ui/command.tsx
@@ -129,7 +129,7 @@ function CommandGroup({
     <CommandPrimitive.Group
       data-slot="command-group"
       className={cn(
-        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        "text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium",
         className
       )}
       {...props}
@@ -159,7 +159,7 @@ function CommandItem({
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-lg!",
+        "data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground group/command-item relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -171,7 +171,7 @@ function CommandItem({
         hugeicons="Tick02Icon"
         phosphor="CheckIcon"
         remixicon="RiCheckLine"
-        className="ml-auto opacity-0 group-has-[[data-slot=command-shortcut]]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
+        className="ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100"
       />
     </CommandPrimitive.Item>
   )
diff --git a/apps/v4/examples/radix/ui/context-menu.tsx b/apps/v4/examples/radix/ui/context-menu.tsx
index fe66611dbb..0765996ce2 100644
--- a/apps/v4/examples/radix/ui/context-menu.tsx
+++ b/apps/v4/examples/radix/ui/context-menu.tsx
@@ -93,7 +93,7 @@ function ContextMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -114,7 +114,7 @@ function ContextMenuSubTrigger({
       data-slot="context-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -152,13 +152,17 @@ function ContextMenuCheckboxItem({
   className,
   children,
   checked,
+  inset,
   ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
   return (
     <ContextMenuPrimitive.CheckboxItem
       data-slot="context-menu-checkbox-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -183,13 +187,17 @@ function ContextMenuCheckboxItem({
 function ContextMenuRadioItem({
   className,
   children,
+  inset,
   ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
   return (
     <ContextMenuPrimitive.RadioItem
       data-slot="context-menu-radio-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -222,7 +230,7 @@ function ContextMenuLabel({
       data-slot="context-menu-label"
       data-inset={inset}
       className={cn(
-        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:pl-8",
+        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/dropdown-menu.tsx b/apps/v4/examples/radix/ui/dropdown-menu.tsx
index b5403b672a..a7040c1831 100644
--- a/apps/v4/examples/radix/ui/dropdown-menu.tsx
+++ b/apps/v4/examples/radix/ui/dropdown-menu.tsx
@@ -76,7 +76,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -88,13 +88,17 @@ function DropdownMenuCheckboxItem({
   className,
   children,
   checked,
+  inset,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
   return (
     <DropdownMenuPrimitive.CheckboxItem
       data-slot="dropdown-menu-checkbox-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       checked={checked}
@@ -133,13 +137,17 @@ function DropdownMenuRadioGroup({
 function DropdownMenuRadioItem({
   className,
   children,
+  inset,
   ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
   return (
     <DropdownMenuPrimitive.RadioItem
       data-slot="dropdown-menu-radio-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -175,7 +183,7 @@ function DropdownMenuLabel({
       data-slot="dropdown-menu-label"
       data-inset={inset}
       className={cn(
-        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:pl-8",
+        "text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7",
         className
       )}
       {...props}
@@ -231,7 +239,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/field.tsx b/apps/v4/examples/radix/ui/field.tsx
index 00729fbd85..20223af414 100644
--- a/apps/v4/examples/radix/ui/field.tsx
+++ b/apps/v4/examples/radix/ui/field.tsx
@@ -42,7 +42,7 @@ function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-group"
       className={cn(
-        "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",
+        "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",
         className
       )}
       {...props}
@@ -55,11 +55,11 @@ const fieldVariants = cva(
   {
     variants: {
       orientation: {
-        vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
         horizontal:
-          "flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+          "flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
         responsive:
-          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+          "flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
       },
     },
     defaultVariants: {
@@ -105,7 +105,7 @@ function FieldLabel({
     <Label
       data-slot="field-label"
       className={cn(
-        "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2.5",
+        "has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5",
         "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
         className
       )}
@@ -132,7 +132,7 @@ function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
     <p
       data-slot="field-description"
       className={cn(
-        "text-muted-foreground text-left text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "text-muted-foreground text-left text-sm leading-normal font-normal group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
         "last:mt-0 nth-last-2:-mt-1",
         "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
         className
diff --git a/apps/v4/examples/radix/ui/input-group.tsx b/apps/v4/examples/radix/ui/input-group.tsx
index 34be4e518f..126c3af8ba 100644
--- a/apps/v4/examples/radix/ui/input-group.tsx
+++ b/apps/v4/examples/radix/ui/input-group.tsx
@@ -13,7 +13,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
       data-slot="input-group"
       role="group"
       className={cn(
-        "border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] 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 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0",
+        "border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 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 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/input-otp.tsx b/apps/v4/examples/radix/ui/input-otp.tsx
index f25d7ec025..3abfecd985 100644
--- a/apps/v4/examples/radix/ui/input-otp.tsx
+++ b/apps/v4/examples/radix/ui/input-otp.tsx
@@ -32,7 +32,7 @@ function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="input-otp-group"
       className={cn(
-        "has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-lg has-aria-invalid:ring-[3px]",
+        "has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive flex items-center rounded-lg has-aria-invalid:ring-3",
         className
       )}
       {...props}
@@ -55,7 +55,7 @@ function InputOTPSlot({
       data-slot="input-otp-slot"
       data-active={isActive}
       className={cn(
-        "dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-8 items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+        "dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive relative flex size-8 items-center justify-center border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:z-10 data-[active=true]:ring-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/input.tsx b/apps/v4/examples/radix/ui/input.tsx
index a2208a3829..952f743a92 100644
--- a/apps/v4/examples/radix/ui/input.tsx
+++ b/apps/v4/examples/radix/ui/input.tsx
@@ -7,7 +7,7 @@ function Input({ className, type, ...props }: React.ComponentProps<"input">) {
       type={type}
       data-slot="input"
       className={cn(
-        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] md:text-sm",
+        "dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 file:text-foreground placeholder:text-muted-foreground h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/item.tsx b/apps/v4/examples/radix/ui/item.tsx
index 752e13a10f..dcc66913e5 100644
--- a/apps/v4/examples/radix/ui/item.tsx
+++ b/apps/v4/examples/radix/ui/item.tsx
@@ -10,7 +10,7 @@ function ItemGroup({ className, ...props }: React.ComponentProps<"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",
+        "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}
@@ -44,7 +44,7 @@ const itemVariants = cva(
       size: {
         default: "gap-2.5 px-3 py-2.5",
         sm: "gap-2.5 px-3 py-2.5",
-        xs: "gap-2 px-2.5 py-2 [[data-slot=dropdown-menu-content]_&]:p-0",
+        xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0",
       },
     },
     defaultVariants: {
@@ -75,7 +75,7 @@ function Item({
 }
 
 const itemMediaVariants = cva(
-  "gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
+  "gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none",
   {
     variants: {
       variant: {
diff --git a/apps/v4/examples/radix/ui/kbd.tsx b/apps/v4/examples/radix/ui/kbd.tsx
index 9e31c48190..d99543b959 100644
--- a/apps/v4/examples/radix/ui/kbd.tsx
+++ b/apps/v4/examples/radix/ui/kbd.tsx
@@ -5,7 +5,7 @@ function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
     <kbd
       data-slot="kbd"
       className={cn(
-        "bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3",
+        "bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none [&_svg:not([class*='size-'])]:size-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/menubar.tsx b/apps/v4/examples/radix/ui/menubar.tsx
index cc72dff4e2..4ee7f38c9b 100644
--- a/apps/v4/examples/radix/ui/menubar.tsx
+++ b/apps/v4/examples/radix/ui/menubar.tsx
@@ -103,7 +103,7 @@ function MenubarItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/menubar-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground group/menubar-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -115,13 +115,17 @@ function MenubarCheckboxItem({
   className,
   children,
   checked,
+  inset,
   ...props
-}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem> & {
+  inset?: boolean
+}) {
   return (
     <MenubarPrimitive.CheckboxItem
       data-slot="menubar-checkbox-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       checked={checked}
@@ -146,13 +150,17 @@ function MenubarCheckboxItem({
 function MenubarRadioItem({
   className,
   children,
+  inset,
   ...props
-}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem> & {
+  inset?: boolean
+}) {
   return (
     <MenubarPrimitive.RadioItem
       data-slot="menubar-radio-item"
+      data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -185,7 +193,7 @@ function MenubarLabel({
       data-slot="menubar-label"
       data-inset={inset}
       className={cn(
-        "px-1.5 py-1 text-sm font-medium data-[inset]:pl-8",
+        "px-1.5 py-1 text-sm font-medium data-inset:pl-7",
         className
       )}
       {...props}
@@ -241,7 +249,7 @@ function MenubarSubTrigger({
       data-slot="menubar-sub-trigger"
       data-inset={inset}
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none select-none data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-none select-none data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/native-select.tsx b/apps/v4/examples/radix/ui/native-select.tsx
index 2962b9b116..35fec126d0 100644
--- a/apps/v4/examples/radix/ui/native-select.tsx
+++ b/apps/v4/examples/radix/ui/native-select.tsx
@@ -24,7 +24,7 @@ function NativeSelect({
       <select
         data-slot="native-select"
         data-size={size}
-        className="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-[3px] data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5"
+        className="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors outline-none select-none focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5"
         {...props}
       />
       <IconPlaceholder
diff --git a/apps/v4/examples/radix/ui/navigation-menu.tsx b/apps/v4/examples/radix/ui/navigation-menu.tsx
index cb1c796bbe..6d37f31b43 100644
--- a/apps/v4/examples/radix/ui/navigation-menu.tsx
+++ b/apps/v4/examples/radix/ui/navigation-menu.tsx
@@ -59,7 +59,7 @@ function NavigationMenuItem({
 }
 
 const navigationMenuTriggerStyle = cva(
-  "bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none"
+  "bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none"
 )
 
 function NavigationMenuTrigger({
@@ -80,7 +80,7 @@ function NavigationMenuTrigger({
         hugeicons="ArrowDown01Icon"
         phosphor="CaretDownIcon"
         remixicon="RiArrowDownSLine"
-        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
+        className="relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180"
         aria-hidden="true"
       />
     </NavigationMenuPrimitive.Trigger>
@@ -116,7 +116,7 @@ function NavigationMenuViewport({
       <NavigationMenuPrimitive.Viewport
         data-slot="navigation-menu-viewport"
         className={cn(
-          "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-lg shadow ring-1 duration-100 md:w-[var(--radix-navigation-menu-viewport-width)]",
+          "bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-lg shadow ring-1 duration-100 md:w-(--radix-navigation-menu-viewport-width)",
           className
         )}
         {...props}
@@ -133,7 +133,7 @@ function NavigationMenuLink({
     <NavigationMenuPrimitive.Link
       data-slot="navigation-menu-link"
       className={cn(
-        "data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 [[data-slot=navigation-menu-content]_&]:rounded-md",
+        "data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -149,7 +149,7 @@ function NavigationMenuIndicator({
     <NavigationMenuPrimitive.Indicator
       data-slot="navigation-menu-indicator"
       className={cn(
-        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/radio-group.tsx b/apps/v4/examples/radix/ui/radio-group.tsx
index a4d6b8e769..d7558f1386 100644
--- a/apps/v4/examples/radix/ui/radio-group.tsx
+++ b/apps/v4/examples/radix/ui/radio-group.tsx
@@ -27,7 +27,7 @@ function RadioGroupItem({
     <RadioGroupPrimitive.Item
       data-slot="radio-group-item"
       className={cn(
-        "border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px]",
+        "border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/select.tsx b/apps/v4/examples/radix/ui/select.tsx
index 6be0184fb3..590f9044a9 100644
--- a/apps/v4/examples/radix/ui/select.tsx
+++ b/apps/v4/examples/radix/ui/select.tsx
@@ -44,7 +44,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *: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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *: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 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -90,7 +90,7 @@ function SelectContent({
         <SelectPrimitive.Viewport
           data-position={position}
           className={cn(
-            "data-[position=popper]:h-[var(--radix-select-trigger-height)] data-[position=popper]:w-full data-[position=popper]:min-w-[var(--radix-select-trigger-width)]",
+            "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)",
             position === "popper" && ""
           )}
         >
@@ -124,7 +124,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none 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",
+        "focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none 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}
diff --git a/apps/v4/examples/radix/ui/separator.tsx b/apps/v4/examples/radix/ui/separator.tsx
index 336dd15436..5d2038a84c 100644
--- a/apps/v4/examples/radix/ui/separator.tsx
+++ b/apps/v4/examples/radix/ui/separator.tsx
@@ -16,7 +16,7 @@ function Separator({
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch",
+        "bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/slider.tsx b/apps/v4/examples/radix/ui/slider.tsx
index c95ea2426b..ce60ce281a 100644
--- a/apps/v4/examples/radix/ui/slider.tsx
+++ b/apps/v4/examples/radix/ui/slider.tsx
@@ -48,7 +48,7 @@ function Slider({
         <SliderPrimitive.Thumb
           data-slot="slider-thumb"
           key={index}
-          className="border-ring ring-ring/50 relative block size-3 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-[3px] focus-visible:ring-[3px] focus-visible:outline-hidden active:ring-[3px] disabled:pointer-events-none disabled:opacity-50"
+          className="border-ring ring-ring/50 relative block size-3 shrink-0 rounded-full border bg-white transition-[color,box-shadow] select-none after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 disabled:pointer-events-none disabled:opacity-50"
         />
       ))}
     </SliderPrimitive.Root>
diff --git a/apps/v4/examples/radix/ui/switch.tsx b/apps/v4/examples/radix/ui/switch.tsx
index de598b3d97..c5dba43f66 100644
--- a/apps/v4/examples/radix/ui/switch.tsx
+++ b/apps/v4/examples/radix/ui/switch.tsx
@@ -16,7 +16,7 @@ function Switch({
       data-slot="switch"
       data-size={size}
       className={cn(
-        "data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-[3px] aria-invalid:ring-[3px] data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]",
+        "data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:ring-3 aria-invalid:ring-3 data-disabled:cursor-not-allowed data-disabled:opacity-50 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px]",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/tabs.tsx b/apps/v4/examples/radix/ui/tabs.tsx
index 07423a03c0..e46a357802 100644
--- a/apps/v4/examples/radix/ui/tabs.tsx
+++ b/apps/v4/examples/radix/ui/tabs.tsx
@@ -15,7 +15,7 @@ function Tabs({
       data-slot="tabs"
       data-orientation={orientation}
       className={cn(
-        "group/tabs flex gap-2 data-[orientation=horizontal]:flex-col",
+        "group/tabs flex gap-2 data-horizontal:flex-col",
         className
       )}
       {...props}
@@ -24,7 +24,7 @@ function Tabs({
 }
 
 const tabsListVariants = cva(
-  "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col",
   {
     variants: {
       variant: {
@@ -62,10 +62,10 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground",
-        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
+        "after:bg-foreground after:absolute 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}
diff --git a/apps/v4/examples/radix/ui/textarea.tsx b/apps/v4/examples/radix/ui/textarea.tsx
index d60d20d490..5b3cf28626 100644
--- a/apps/v4/examples/radix/ui/textarea.tsx
+++ b/apps/v4/examples/radix/ui/textarea.tsx
@@ -6,7 +6,7 @@ function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
     <textarea
       data-slot="textarea"
       className={cn(
-        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-[3px] md:text-sm",
+        "border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/toggle-group.tsx b/apps/v4/examples/radix/ui/toggle-group.tsx
index d107853608..c615cc42b3 100644
--- a/apps/v4/examples/radix/ui/toggle-group.tsx
+++ b/apps/v4/examples/radix/ui/toggle-group.tsx
@@ -40,7 +40,7 @@ function ToggleGroup({
       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))] rounded-lg data-[orientation=vertical]:flex-col data-[orientation=vertical]:items-stretch data-[size=sm]:rounded-[min(var(--radius-md),10px)]",
+        "group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] rounded-lg data-vertical:flex-col data-vertical:items-stretch data-[size=sm]:rounded-[min(var(--radius-md),10px)]",
         className
       )}
       {...props}
diff --git a/apps/v4/examples/radix/ui/tooltip.tsx b/apps/v4/examples/radix/ui/tooltip.tsx
index c2f027206b..7b043395fe 100644
--- a/apps/v4/examples/radix/ui/tooltip.tsx
+++ b/apps/v4/examples/radix/ui/tooltip.tsx
@@ -51,7 +51,7 @@ function TooltipContent({
         {...props}
       >
         {children}
-        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%-2px)] translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
       </TooltipPrimitive.Content>
     </TooltipPrimitive.Portal>
   )
diff --git a/apps/v4/public/r/styles/base-lyra/breadcrumb.json b/apps/v4/public/r/styles/base-lyra/breadcrumb.json
index 4c0435688d..d50b0c2dd0 100644
--- a/apps/v4/public/r/styles/base-lyra/breadcrumb.json
+++ b/apps/v4/public/r/styles/base-lyra/breadcrumb.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/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-lyra/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        \"text-muted-foreground gap-1.5 text-xs flex flex-wrap items-center break-words\",\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(\"gap-1 inline-flex items-center\", 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(\"hover:text-foreground transition-colors\", 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(\"text-foreground font-normal\", 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        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\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",
+      "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-lyra/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        \"text-muted-foreground gap-1.5 text-xs flex flex-wrap items-center wrap-break-word\",\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(\"gap-1 inline-flex items-center\", 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(\"hover:text-foreground transition-colors\", 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(\"text-foreground font-normal\", 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        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/button-group.json b/apps/v4/public/r/styles/base-lyra/button-group.json
index d27b4b0c5b..9384b0f709 100644
--- a/apps/v4/public/r/styles/base-lyra/button-group.json
+++ b/apps/v4/public/r/styles/base-lyra/button-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-lyra/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-lyra/lib/utils\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"rounded-none has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 [&>[data-slot]]:rounded-r-none\",\n        vertical:\n          \"flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 [&>[data-slot]]: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  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"bg-muted gap-2 rounded-none border px-2.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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        \"bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=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 { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Separator } from \"@/registry/base-lyra/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"rounded-none has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 *:data-slot:rounded-r-none\",\n        vertical:\n          \"flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 *:data-slot: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  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"bg-muted gap-2 rounded-none border px-2.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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        \"bg-input relative self-stretch 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/base-lyra/calendar-example.json b/apps/v4/public/r/styles/base-lyra/calendar-example.json
index f7f7baf3e6..602a5fb429 100644
--- a/apps/v4/public/r/styles/base-lyra/calendar-example.json
+++ b/apps/v4/public/r/styles/base-lyra/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-lyra/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-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/base-lyra/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-lyra/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-lyra/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-lyra/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    </ExampleWrapper>\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=\"bg-card border-t\">\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            <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            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\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",
+      "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-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/base-lyra/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-lyra/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-lyra/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-lyra/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=\"bg-card border-t\">\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/calendar.json b/apps/v4/public/r/styles/base-lyra/calendar.json
index 2c71caa3b9..0768422a5b 100644
--- a/apps/v4/public/r/styles/base-lyra/calendar.json
+++ b/apps/v4/public/r/styles/base-lyra/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/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-lyra/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/base-lyra/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        \"p-2 [--cell-size:--spacing(7)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[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          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\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          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) 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        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground 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:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "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-lyra/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/base-lyra/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        \"p-2 [--cell-size:--spacing(7)] bg-background group/calendar 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          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\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          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) 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        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground 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:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/chart.json b/apps/v4/public/r/styles/base-lyra/chart.json
index a624970661..6286d728c2 100644
--- a/apps/v4/public/r/styles/base-lyra/chart.json
+++ b/apps/v4/public/r/styles/base-lyra/chart.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\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  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\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          \"[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.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          {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  }) {\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 as keyof typeof config]?.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        \"border-border/50 bg-background gap-1.5 rounded-none border px-2.5 py-1.5 text-xs shadow-xl grid min-w-[8rem] items-start\",\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={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\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 && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\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  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\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) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\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\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\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  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\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          \"[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.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          {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  }) {\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 as keyof typeof config]?.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(\"border-border/50 bg-background gap-1.5 rounded-none border px-2.5 py-1.5 text-xs shadow-xl grid min-w-32 items-start\", className)}\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={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\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 && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\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  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\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) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\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\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/combobox-example.json b/apps/v4/public/r/styles/base-lyra/combobox-example.json
index 932975256b..055c8114c7 100644
--- a/apps/v4/public/r/styles/base-lyra/combobox-example.json
+++ b/apps/v4/public/r/styles/base-lyra/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/base-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/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-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/base-lyra/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-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      <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    </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\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=\"text-muted-foreground w-52 justify-between font-normal\"\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/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-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/base-lyra/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-lyra/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-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      <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=\"text-muted-foreground w-52 justify-between font-normal\"\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/base-lyra/combobox.json b/apps/v4/public/r/styles/base-lyra/combobox.json
index d0f9d796d4..b16bdf5845 100644
--- a/apps/v4/public/r/styles/base-lyra/combobox.json
+++ b/apps/v4/public/r/styles/base-lyra/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/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-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-lyra/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=\"text-muted-foreground size-4 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-none shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target 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) data-[chips=true]:min-w-(--anchor-width)\",\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 overflow-y-auto data-empty:p-0 overflow-y-auto overscroll-contain\",\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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\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(\"text-muted-foreground px-2 py-2 text-xs\", className)}\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(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-xs group-data-empty/combobox-content:flex\", className)}\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(\"bg-border -mx-1 h-px\", 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(\"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-none border bg-transparent bg-clip-padding px-2.5 py-1 text-xs transition-colors focus-within:ring-1 has-aria-invalid:ring-1 has-data-[slot=combobox-chip]:px-1\", className)}\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        \"bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-none px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\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(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-lyra/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=\"text-muted-foreground size-4 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-none shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target 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) data-[chips=true]:min-w-(--anchor-width)\",\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 overflow-y-auto data-empty:p-0 overflow-y-auto overscroll-contain\",\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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\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(\"text-muted-foreground px-2 py-2 text-xs\", className)}\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(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-xs group-data-empty/combobox-content:flex\", className)}\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(\"bg-border -mx-1 h-px\", 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(\"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-none border bg-transparent bg-clip-padding px-2.5 py-1 text-xs transition-colors focus-within:ring-1 has-aria-invalid:ring-1 has-data-[slot=combobox-chip]:px-1\", className)}\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        \"bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-none px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\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(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/command-example.json b/apps/v4/public/r/styles/base-lyra/command-example.json
index 245c339981..491c10ddb3 100644
--- a/apps/v4/public/r/styles/base-lyra/command-example.json
+++ b/apps/v4/public/r/styles/base-lyra/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/base-lyra/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/base-lyra/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { Card, CardContent } from \"@/registry/base-lyra/ui/card\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/command.json b/apps/v4/public/r/styles/base-lyra/command.json
index 2fd623ebae..e0028a5ef0 100644
--- a/apps/v4/public/r/styles/base-lyra/command.json
+++ b/apps/v4/public/r/styles/base-lyra/command.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/base-lyra/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        \"bg-popover text-popover-foreground rounded-none flex size-full flex-col overflow-hidden\",\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(\n          \"rounded-none top-1/3 translate-y-0 overflow-hidden p-0\",\n          className\n        )}\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=\"border-b pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8 border-none shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-xs 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-0 outline-none overflow-x-hidden overflow-y-auto\",\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-xs\", 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(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs\", className)}\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(\"bg-border -mx-1 h-px\", 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        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-none! group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/base-lyra/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        \"bg-popover text-popover-foreground rounded-none flex size-full flex-col overflow-hidden\",\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(\n          \"rounded-none top-1/3 translate-y-0 overflow-hidden p-0\",\n          className\n        )}\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=\"border-b pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8 border-none shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-xs 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-0 outline-none overflow-x-hidden overflow-y-auto\",\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-xs\", 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(\"text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs\", className)}\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(\"bg-border -mx-1 h-px\", 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        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none in-data-[slot=dialog-content]:rounded-none! [&_svg:not([class*='size-'])]:size-4 group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/context-menu-example.json b/apps/v4/public/r/styles/base-lyra/context-menu-example.json
index 76a19bf5c8..34fe767675 100644
--- a/apps/v4/public/r/styles/base-lyra/context-menu-example.json
+++ b/apps/v4/public/r/styles/base-lyra/context-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/context-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\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-lyra/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-lyra/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    </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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\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-lyra/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-lyra/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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/context-menu.json b/apps/v4/public/r/styles/base-lyra/context-menu.json
index 410ca1176b..eeb4a9b882 100644
--- a/apps/v4/public/r/styles/base-lyra/context-menu.json
+++ b/apps/v4/public/r/styles/base-lyra/context-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/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-lyra/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            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-none shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none\",\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(\"text-muted-foreground px-2 py-2 text-xs data-[inset]:pl-8\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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=\"absolute right-2 pointer-events-none\">\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  ...props\n}: ContextMenuPrimitive.RadioItem.Props) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\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(\"bg-border -mx-1 h-px\", 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(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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",
+      "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-lyra/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            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-none shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none\",\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(\"text-muted-foreground px-2 py-2 text-xs data-inset:pl-7\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"shadow-lg\"\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        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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=\"absolute right-2 pointer-events-none\">\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        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\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(\"bg-border -mx-1 h-px\", 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(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/dropdown-menu-example.json b/apps/v4/public/r/styles/base-lyra/dropdown-menu-example.json
index c259890c28..53efd3caca 100644
--- a/apps/v4/public/r/styles/base-lyra/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/base-lyra/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-lyra/ui/avatar\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-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/base-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      <DropdownMenuSides />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\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=\"text-muted-foreground truncate text-xs\">\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=\"text-muted-foreground ml-auto\"\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 DropdownMenuComplex() {\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=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\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=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\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({ ...notifications, email: checked === true })\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({ ...notifications, sms: checked === true })\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    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-lyra/ui/avatar\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-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/base-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      <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=\"text-muted-foreground truncate text-xs\">\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=\"text-muted-foreground ml-auto\"\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 [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=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\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=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\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({ ...notifications, email: checked === true })\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({ ...notifications, sms: checked === true })\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    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/dropdown-menu.json b/apps/v4/public/r/styles/base-lyra/dropdown-menu.json
index f7699cc28e..c17a9cd9f4 100644
--- a/apps/v4/public/r/styles/base-lyra/dropdown-menu.json
+++ b/apps/v4/public/r/styles/base-lyra/dropdown-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/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-lyra/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            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-none shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden\",\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(\"text-muted-foreground px-2 py-2 text-xs data-[inset]:pl-8\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-none shadow-lg ring-1 duration-100 w-auto\", className)}\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  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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(\"bg-border -mx-1 h-px\", 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(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"@/registry/base-lyra/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            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-none shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden\",\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(\"text-muted-foreground px-2 py-2 text-xs data-inset:pl-7\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-none shadow-lg ring-1 duration-100 w-auto\", className)}\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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(\"bg-border -mx-1 h-px\", 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(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/field-example.json b/apps/v4/public/r/styles/base-lyra/field-example.json
index 16c9133553..8463e0b36d 100644
--- a/apps/v4/public/r/styles/base-lyra/field-example.json
+++ b/apps/v4/public/r/styles/base-lyra/field-example.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/field-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-lyra/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/base-lyra/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/base-lyra/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-lyra/ui/select\"\nimport { Slider } from \"@/registry/base-lyra/ui/slider\"\nimport { Switch } from \"@/registry/base-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n    </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",
+      "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-lyra/components/example\"\nimport { Badge } from \"@/registry/base-lyra/ui/badge\"\nimport { Checkbox } from \"@/registry/base-lyra/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-lyra/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/base-lyra/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/base-lyra/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-lyra/ui/select\"\nimport { Slider } from \"@/registry/base-lyra/ui/slider\"\nimport { Switch } from \"@/registry/base-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/base-lyra/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/field.json b/apps/v4/public/r/styles/base-lyra/field.json
index 668c54b3c5..1ab331df16 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(\"gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\", className)}\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(\"mb-2.5 font-medium data-[variant=label]:text-xs data-[variant=legend]:text-sm\", className)}\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        \"gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\"data-[invalid=true]:text-destructive gap-2 group/field flex w-full\", {\n  variants: {\n    orientation: {\n      vertical:\n        \"flex-col [&>*]:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      responsive:\n        \"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\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        \"gap-0.5 group/field-content flex flex-1 flex-col 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        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2 group/field-label peer/field-label flex w-fit leading-snug\",\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        \"gap-2 text-xs/relaxed group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\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-muted-foreground text-left text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\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(\"-my-2 h-5 text-xs group-data-[variant=outline]/field-group:-mb-2 relative\", className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\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-destructive text-xs font-normal\", 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(\"gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\", className)}\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(\"mb-2.5 font-medium data-[variant=label]:text-xs data-[variant=legend]:text-sm\", className)}\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        \"gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\"data-[invalid=true]:text-destructive gap-2 group/field flex w-full\", {\n  variants: {\n    orientation: {\n      vertical:\n        \"flex-col *:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      responsive:\n        \"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\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        \"gap-0.5 group/field-content flex flex-1 flex-col 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        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-2 group/field-label peer/field-label flex w-fit leading-snug\",\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        \"gap-2 text-xs/relaxed group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\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-muted-foreground text-left text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\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(\"-my-2 h-5 text-xs group-data-[variant=outline]/field-group:-mb-2 relative\", className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\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-destructive text-xs font-normal\", 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/input-group.json b/apps/v4/public/r/styles/base-lyra/input-group.json
index 4dde5bdacb..c6e150fe96 100644
--- a/apps/v4/public/r/styles/base-lyra/input-group.json
+++ b/apps/v4/public/r/styles/base-lyra/input-group.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-lyra/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-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Textarea } from \"@/registry/base-lyra/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        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-none border transition-colors has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot][aria-invalid=true]]:ring-1 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-xs font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-none [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\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  \"gap-2 text-xs shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-none px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 rounded-none p-0 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        \"text-muted-foreground gap-2 text-xs [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1\", className)}\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(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/lib/utils\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport { Textarea } from \"@/registry/base-lyra/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        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-none border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot][aria-invalid=true]]:ring-1 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-xs font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-none [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\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  \"gap-2 text-xs shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-none px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 rounded-none p-0 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        \"text-muted-foreground gap-2 text-xs [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1\", className)}\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(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/item.json b/apps/v4/public/r/styles/base-lyra/item.json
index e028251f07..9c2c72dd3e 100644
--- a/apps/v4/public/r/styles/base-lyra/item.json
+++ b/apps/v4/public/r/styles/base-lyra/item.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-lyra/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-lyra/lib/utils\"\nimport { Separator } from \"@/registry/base-lyra/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        \"gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2 group/item-group flex w-full flex-col\",\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  \"[a]:hover:bg-muted rounded-none border text-xs w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 [[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  \"gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-10 overflow-hidden rounded-none group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_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        \"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[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        \"gap-2 text-xs font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\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        \"text-muted-foreground text-left text-xs/relaxed group-data-[size=xs]/item:text-xs/relaxed [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\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(\"gap-2 flex items-center\", 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        \"gap-2 flex basis-full items-center justify-between\",\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        \"gap-2 flex basis-full items-center justify-between\",\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",
+      "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-lyra/lib/utils\"\nimport { Separator } from \"@/registry/base-lyra/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        \"gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col\",\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  \"[a]:hover:bg-muted rounded-none border text-xs w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 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  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-10 overflow-hidden rounded-none group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_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        \"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[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        \"gap-2 text-xs font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\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        \"text-muted-foreground text-left text-xs/relaxed group-data-[size=xs]/item:text-xs/relaxed [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\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(\"gap-2 flex items-center\", 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        \"gap-2 flex basis-full items-center justify-between\",\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        \"gap-2 flex basis-full items-center justify-between\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/kbd.json b/apps/v4/public/r/styles/base-lyra/kbd.json
index aefc68a342..a771078700 100644
--- a/apps/v4/public/r/styles/base-lyra/kbd.json
+++ b/apps/v4/public/r/styles/base-lyra/kbd.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/kbd.tsx",
-      "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-none px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\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(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
+      "content": "import { cn } from \"@/registry/base-lyra/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-none px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\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(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/menubar-example.json b/apps/v4/public/r/styles/base-lyra/menubar-example.json
index 0c025689a6..f505aae5e2 100644
--- a/apps/v4/public/r/styles/base-lyra/menubar-example.json
+++ b/apps/v4/public/r/styles/base-lyra/menubar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/menubar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-lyra/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/base-lyra/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    </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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport { Button } from \"@/registry/base-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-lyra/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-lyra/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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/menubar.json b/apps/v4/public/r/styles/base-lyra/menubar.json
index 4bd718a089..5df4fcdd4b 100644
--- a/apps/v4/public/r/styles/base-lyra/menubar.json
+++ b/apps/v4/public/r/styles/base-lyra/menubar.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-lyra/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-lyra/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-lyra/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(\"bg-background h-8 gap-0.5 rounded-none border p-1 flex items-center\", className)}\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        \"hover:bg-muted aria-expanded:bg-muted rounded-none px-1.5 py-[calc(--spacing(0.8))] text-xs font-medium flex items-center outline-hidden select-none\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-none shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target\",\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(\"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-2 pl-7 text-xs data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none 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=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-2 pl-7 text-xs data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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  return (\n    <DropdownMenuLabel\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"px-2 py-2 text-xs data-[inset]:pl-8\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\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(\"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4\", className)}\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(\"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-none shadow-lg ring-1 duration-100\", className)}\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",
+      "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-lyra/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-lyra/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(\"bg-background h-8 gap-0.5 rounded-none border p-1 flex items-center\", className)}\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        \"hover:bg-muted aria-expanded:bg-muted rounded-none px-1.5 py-[calc(--spacing(0.8))] text-xs font-medium flex items-center outline-hidden select-none\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-none shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target\",\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(\"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-disabled:opacity-50 data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item\", className)}\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-28 pl-8 text-xs data-disabled:opacity-50 data-inset:pl-8 relative flex cursor-default items-center outline-hidden select-none 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=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-2 pl-8 text-xs data-disabled:opacity-50 data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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(\"px-2 py-2 text-xs data-inset:pl-8\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\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(\"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4\", className)}\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(\"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-none shadow-lg ring-1 duration-100\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/navigation-menu.json b/apps/v4/public/r/styles/base-lyra/navigation-menu.json
index 99eb72f27a..b964090432 100644
--- a/apps/v4/public/r/styles/base-lyra/navigation-menu.json
+++ b/apps/v4/public/r/styles/base-lyra/navigation-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/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-lyra/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        \"max-w-max 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        \"gap-0 group flex flex-1 list-none items-center justify-center\",\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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-none px-2.5 py-1.5 text-xs font-medium transition-all focus-visible:ring-1 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\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-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-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-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto transition-[opacity,transform,translate] duration-[0.35s] data-[ending-style]:opacity-0 data-[ending-style]:data-[activation-direction=left]:translate-x-[50%] data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%] **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none data-[starting-style]:opacity-0 data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] data-[starting-style]:data-[activation-direction=right]:translate-x-[50%]\",\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          \"transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[0.35s] data-[instant]:transition-none\",\n          className\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"bg-popover text-popover-foreground ring-foreground/10 rounded-none shadow ring-1 transition-all 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 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]\">\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(\"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-none p-2 text-xs transition-all outline-none focus-visible:ring-1 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 [[data-slot=navigation-menu-content]_&]:rounded-none\", className)}\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-none shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\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",
+      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-lyra/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        \"max-w-max 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        \"gap-0 group flex flex-1 list-none items-center justify-center\",\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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-none px-2.5 py-1.5 text-xs font-medium transition-all focus-visible:ring-1 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\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-open/navigation-menu-trigger:rotate-180 group-data-popup-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-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto transition-[opacity,transform,translate] duration-[0.35s] data-ending-style:opacity-0 data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none data-starting-style:opacity-0 data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%]\",\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          \"transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] data-instant:transition-none\",\n          className\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"bg-popover text-popover-foreground ring-foreground/10 rounded-none shadow ring-1 transition-all 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 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]\">\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(\"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-none p-2 text-xs transition-all outline-none focus-visible:ring-1 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none [&_svg:not([class*='size-'])]:size-4\", className)}\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-none shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/resizable.json b/apps/v4/public/r/styles/base-lyra/resizable.json
index c8daa19e9f..29767f4842 100644
--- a/apps/v4/public/r/styles/base-lyra/resizable.json
+++ b/apps/v4/public/r/styles/base-lyra/resizable.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-lyra/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        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 ring-offset-background 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=\"bg-border h-6 w-1 rounded-none z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-lyra/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        \"bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 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=\"bg-border h-6 w-1 rounded-none z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/select.json b/apps/v4/public/r/styles/base-lyra/select.json
index 19b9b79e60..f548bf9192 100644
--- a/apps/v4/public/r/styles/base-lyra/select.json
+++ b/apps/v4/public/r/styles/base-lyra/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/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-lyra/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\", 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        \"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-none border bg-transparent py-2 pr-2 pl-2.5 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-none *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"text-muted-foreground size-4 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-none shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none\",\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(\"text-muted-foreground px-2 py-2 text-xs\", className)}\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        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 gap-2 shrink-0 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\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(\"bg-border -mx-1 h-px pointer-events-none\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/registry/base-lyra/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\", 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        \"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-none border bg-transparent py-2 pr-2 pl-2.5 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-none *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"text-muted-foreground size-4 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-none shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none\",\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(\"text-muted-foreground px-2 py-2 text-xs\", className)}\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        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 gap-2 shrink-0 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\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(\"bg-border -mx-1 h-px pointer-events-none\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/separator.json b/apps/v4/public/r/styles/base-lyra/separator.json
index a00c04780b..040d9f7af1 100644
--- a/apps/v4/public/r/styles/base-lyra/separator.json
+++ b/apps/v4/public/r/styles/base-lyra/separator.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/separator.tsx",
-      "content": "\"use client\"\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"@/registry/base-lyra/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        \"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "content": "\"use client\"\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"@/registry/base-lyra/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        \"bg-border shrink-0 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/tabs.json b/apps/v4/public/r/styles/base-lyra/tabs.json
index 95b6e5a133..b308f4a151 100644
--- a/apps/v4/public/r/styles/base-lyra/tabs.json
+++ b/apps/v4/public/r/styles/base-lyra/tabs.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/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-lyra/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        \"gap-2 group/tabs flex data-[orientation=horizontal]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-none p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=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        \"gap-1.5 rounded-none border border-transparent px-1.5 py-0.5 text-xs font-medium group-data-vertical/tabs:py-[calc(--spacing(1.25))] [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=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(\"text-xs/relaxed flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
+      "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-lyra/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        \"gap-2 group/tabs flex data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-none p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center 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        \"gap-1.5 rounded-none border border-transparent px-1.5 py-0.5 text-xs font-medium group-data-vertical/tabs:py-[calc(--spacing(1.25))] [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute 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(\"text-xs/relaxed flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/toggle-group.json b/apps/v4/public/r/styles/base-lyra/toggle-group.json
index ad37ce0b92..db693d4e29 100644
--- a/apps/v4/public/r/styles/base-lyra/toggle-group.json
+++ b/apps/v4/public/r/styles/base-lyra/toggle-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-lyra/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-lyra/lib/utils\"\nimport { toggleVariants } from \"@/registry/base-lyra/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        \"rounded-none data-[size=sm]:rounded-none group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=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        \"group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 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 shrink-0 focus:z-10 focus-visible:z-10 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",
+      "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-lyra/lib/utils\"\nimport { toggleVariants } from \"@/registry/base-lyra/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        \"rounded-none data-[size=sm]:rounded-none group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] 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        \"group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 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 shrink-0 focus:z-10 focus-visible:z-10 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/tooltip.json b/apps/v4/public/r/styles/base-lyra/tooltip.json
index d65bc6efbe..c4ed56fac5 100644
--- a/apps/v4/public/r/styles/base-lyra/tooltip.json
+++ b/apps/v4/public/r/styles/base-lyra/tooltip.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-lyra/ui/tooltip.tsx",
-      "content": "\"use client\"\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\n\nimport { cn } from \"@/registry/base-lyra/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 (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\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            \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-none px-3 py-1.5 text-xs data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-none data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 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-y-1/2 bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 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",
+      "content": "\"use client\"\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\n\nimport { cn } from \"@/registry/base-lyra/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 (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\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            \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-none px-3 py-1.5 text-xs data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-none data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 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-y-1/2 bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/breadcrumb.json b/apps/v4/public/r/styles/base-maia/breadcrumb.json
index abcc079c64..eb3dd08dea 100644
--- a/apps/v4/public/r/styles/base-maia/breadcrumb.json
+++ b/apps/v4/public/r/styles/base-maia/breadcrumb.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-maia/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-maia/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        \"text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center break-words\",\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(\"gap-1.5 inline-flex items-center\", 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(\"hover:text-foreground transition-colors\", 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(\"text-foreground font-normal\", 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        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\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",
+      "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-maia/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        \"text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center wrap-break-word\",\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(\"gap-1.5 inline-flex items-center\", 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(\"hover:text-foreground transition-colors\", 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(\"text-foreground font-normal\", 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        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/button-group.json b/apps/v4/public/r/styles/base-maia/button-group.json
index 576cd76eed..2f4b9ee12b 100644
--- a/apps/v4/public/r/styles/base-maia/button-group.json
+++ b/apps/v4/public/r/styles/base-maia/button-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-maia/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-maia/lib/utils\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-4xl flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-4xl! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 [&>[data-slot]]:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-4xl! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 [&>[data-slot]]: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  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"bg-muted gap-2 rounded-4xl border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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        \"bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=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 { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Separator } from \"@/registry/base-maia/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-4xl flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-4xl! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 *:data-slot:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-4xl! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 *:data-slot: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  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"bg-muted gap-2 rounded-4xl border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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        \"bg-input relative self-stretch 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/base-maia/calendar-example.json b/apps/v4/public/r/styles/base-maia/calendar-example.json
index 0e7d112ff5..90d2545af4 100644
--- a/apps/v4/public/r/styles/base-maia/calendar-example.json
+++ b/apps/v4/public/r/styles/base-maia/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-maia/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-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/base-maia/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-maia/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-maia/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    </ExampleWrapper>\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=\"bg-card border-t\">\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            <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            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\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",
+      "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-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/base-maia/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-maia/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-maia/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=\"bg-card border-t\">\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/calendar.json b/apps/v4/public/r/styles/base-maia/calendar.json
index 7c6756cacb..4d7363236e 100644
--- a/apps/v4/public/r/styles/base-maia/calendar.json
+++ b/apps/v4/public/r/styles/base-maia/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/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-maia/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/base-maia/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        \"p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[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          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\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          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) 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        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground 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:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "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-maia/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/base-maia/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        \"p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] bg-background group/calendar 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          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\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          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) 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        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground 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:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/chart.json b/apps/v4/public/r/styles/base-maia/chart.json
index 6448ef9c9e..5efe7ece3f 100644
--- a/apps/v4/public/r/styles/base-maia/chart.json
+++ b/apps/v4/public/r/styles/base-maia/chart.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\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  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\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          \"[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.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          {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  }) {\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 as keyof typeof config]?.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        \"border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl grid min-w-[8rem] items-start\",\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={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\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 && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\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  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\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) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\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\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\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  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\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          \"[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.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          {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  }) {\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 as keyof typeof config]?.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(\"border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl grid min-w-32 items-start\", className)}\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={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\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 && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\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  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\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) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\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\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/combobox-example.json b/apps/v4/public/r/styles/base-maia/combobox-example.json
index d8352a90f2..ac37334d1b 100644
--- a/apps/v4/public/r/styles/base-maia/combobox-example.json
+++ b/apps/v4/public/r/styles/base-maia/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/base-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/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-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/base-maia/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-maia/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-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      <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    </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\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=\"text-muted-foreground w-52 justify-between font-normal\"\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/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-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/base-maia/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-maia/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-maia/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-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      <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=\"text-muted-foreground w-52 justify-between font-normal\"\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/base-maia/combobox.json b/apps/v4/public/r/styles/base-maia/combobox.json
index 4f5c0e158e..f380f5800f 100644
--- a/apps/v4/public/r/styles/base-maia/combobox.json
+++ b/apps/v4/public/r/styles/base-maia/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/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-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-maia/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=\"text-muted-foreground size-4 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 *:data-[slot=input-group]:bg-input/30 max-h-72 min-w-36 overflow-hidden rounded-2xl shadow-2xl ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-9 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target 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) data-[chips=true]:min-w-(--anchor-width)\",\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 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\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(\"text-muted-foreground px-3.5 py-2.5 text-xs\", className)}\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(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-4xl border bg-clip-padding px-2.5 py-1.5 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5\", className)}\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        \"bg-muted-foreground/10 text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-4xl px-2 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\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(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-maia/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=\"text-muted-foreground size-4 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 *:data-[slot=input-group]:bg-input/30 max-h-72 min-w-36 overflow-hidden rounded-2xl shadow-2xl ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-9 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target 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) data-[chips=true]:min-w-(--anchor-width)\",\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 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\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(\"text-muted-foreground px-3.5 py-2.5 text-xs\", className)}\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(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-4xl border bg-clip-padding px-2.5 py-1.5 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5\", className)}\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        \"bg-muted-foreground/10 text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-4xl px-2 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\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(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/command-example.json b/apps/v4/public/r/styles/base-maia/command-example.json
index 2ab911093a..e2970d7a2d 100644
--- a/apps/v4/public/r/styles/base-maia/command-example.json
+++ b/apps/v4/public/r/styles/base-maia/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/base-maia/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/base-maia/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { Card, CardContent } from \"@/registry/base-maia/ui/card\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/command.json b/apps/v4/public/r/styles/base-maia/command.json
index 56967e727b..a16d6fbd39 100644
--- a/apps/v4/public/r/styles/base-maia/command.json
+++ b/apps/v4/public/r/styles/base-maia/command.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-maia/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/base-maia/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        \"bg-popover text-popover-foreground rounded-4xl p-1 flex size-full flex-col overflow-hidden\",\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(\n          \"rounded-4xl! p-0 top-1/3 translate-y-0 overflow-hidden p-0\",\n          className\n        )}\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 pb-0\">\n      <InputGroup className=\"bg-input/30 h-9\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full 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 outline-none overflow-x-hidden overflow-y-auto\",\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(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\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(\"bg-border/50 my-1 h-px\", 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        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-lg px-3 py-2 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-2xl group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-maia/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/base-maia/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        \"bg-popover text-popover-foreground rounded-4xl p-1 flex size-full flex-col overflow-hidden\",\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(\n          \"rounded-4xl! p-0 top-1/3 translate-y-0 overflow-hidden p-0\",\n          className\n        )}\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 pb-0\">\n      <InputGroup className=\"bg-input/30 h-9\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full 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 outline-none overflow-x-hidden overflow-y-auto\",\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(\"text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium\", className)}\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(\"bg-border/50 my-1 h-px\", 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        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-lg px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-2xl [&_svg:not([class*='size-'])]:size-4 group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/context-menu-example.json b/apps/v4/public/r/styles/base-maia/context-menu-example.json
index 07a9d69595..6cd2552225 100644
--- a/apps/v4/public/r/styles/base-maia/context-menu-example.json
+++ b/apps/v4/public/r/styles/base-maia/context-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/context-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\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-maia/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-maia/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    </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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\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-maia/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-maia/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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/context-menu.json b/apps/v4/public/r/styles/base-maia/context-menu.json
index cd37b07665..1ac03fa911 100644
--- a/apps/v4/public/r/styles/base-maia/context-menu.json
+++ b/apps/v4/public/r/styles/base-maia/context-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-maia/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-maia/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            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none\",\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(\"text-muted-foreground px-3 py-2.5 text-xs data-[inset]:pl-8\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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=\"absolute right-2 pointer-events-none\">\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  ...props\n}: ContextMenuPrimitive.RadioItem.Props) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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",
+      "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-maia/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            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none\",\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(\"text-muted-foreground px-3 py-2.5 text-xs data-inset:pl-9.5\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-xl px-3 py-2 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"shadow-lg\"\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        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-xl py-2 pr-8 pl-3 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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=\"absolute right-2 pointer-events-none\">\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        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/dropdown-menu-example.json b/apps/v4/public/r/styles/base-maia/dropdown-menu-example.json
index 04be8f9f29..afb763ff58 100644
--- a/apps/v4/public/r/styles/base-maia/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/base-maia/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-maia/ui/avatar\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-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/base-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      <DropdownMenuSides />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\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=\"text-muted-foreground truncate text-xs\">\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=\"text-muted-foreground ml-auto\"\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 DropdownMenuComplex() {\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=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\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=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\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({ ...notifications, email: checked === true })\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({ ...notifications, sms: checked === true })\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    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-maia/ui/avatar\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-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/base-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      <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=\"text-muted-foreground truncate text-xs\">\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=\"text-muted-foreground ml-auto\"\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 [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=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\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=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\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({ ...notifications, email: checked === true })\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({ ...notifications, sms: checked === true })\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    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/dropdown-menu.json b/apps/v4/public/r/styles/base-maia/dropdown-menu.json
index 20da91d87e..8626933980 100644
--- a/apps/v4/public/r/styles/base-maia/dropdown-menu.json
+++ b/apps/v4/public/r/styles/base-maia/dropdown-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-maia/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-maia/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            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden\",\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(\"text-muted-foreground px-3 py-2.5 text-xs data-[inset]:pl-8\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-36 rounded-2xl p-1 shadow-2xl ring-1 duration-100 w-auto\", className)}\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  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"@/registry/base-maia/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            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden\",\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(\"text-muted-foreground px-3 py-2.5 text-xs data-inset:pl-9.5\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-36 rounded-2xl p-1 shadow-2xl ring-1 duration-100 w-auto\", className)}\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/field-example.json b/apps/v4/public/r/styles/base-maia/field-example.json
index 6794b9fc4e..9c4f90f096 100644
--- a/apps/v4/public/r/styles/base-maia/field-example.json
+++ b/apps/v4/public/r/styles/base-maia/field-example.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/field-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Badge } from \"@/registry/base-maia/ui/badge\"\nimport { Checkbox } from \"@/registry/base-maia/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-maia/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/base-maia/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/base-maia/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-maia/ui/select\"\nimport { Slider } from \"@/registry/base-maia/ui/slider\"\nimport { Switch } from \"@/registry/base-maia/ui/switch\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n    </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",
+      "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-maia/components/example\"\nimport { Badge } from \"@/registry/base-maia/ui/badge\"\nimport { Checkbox } from \"@/registry/base-maia/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-maia/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/base-maia/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/base-maia/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-maia/ui/select\"\nimport { Slider } from \"@/registry/base-maia/ui/slider\"\nimport { Switch } from \"@/registry/base-maia/ui/switch\"\nimport { Textarea } from \"@/registry/base-maia/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/field.json b/apps/v4/public/r/styles/base-maia/field.json
index 17f0ab3a68..6cecbce50e 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(\"gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\", className)}\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(\"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\", className)}\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        \"gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\"data-[invalid=true]:text-destructive gap-3 group/field flex w-full\", {\n  variants: {\n    orientation: {\n      vertical:\n        \"flex-col [&>*]:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      responsive:\n        \"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\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        \"gap-1 group/field-content flex flex-1 flex-col 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        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4 group/field-label peer/field-label flex w-fit leading-snug\",\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        \"gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\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-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\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(\"-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative\", className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\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-destructive text-sm font-normal\", 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(\"gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\", className)}\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(\"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\", className)}\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        \"gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\"data-[invalid=true]:text-destructive gap-3 group/field flex w-full\", {\n  variants: {\n    orientation: {\n      vertical:\n        \"flex-col *:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      responsive:\n        \"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\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        \"gap-1 group/field-content flex flex-1 flex-col 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        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4 group/field-label peer/field-label flex w-fit leading-snug\",\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        \"gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\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-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\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(\"-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative\", className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\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-destructive text-sm font-normal\", 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/input-group.json b/apps/v4/public/r/styles/base-maia/input-group.json
index f1ba4a6798..433794fba1 100644
--- a/apps/v4/public/r/styles/base-maia/input-group.json
+++ b/apps/v4/public/r/styles/base-maia/input-group.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-maia/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-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Textarea } from \"@/registry/base-maia/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        \"border-input bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-4xl border transition-colors has-data-[align=block-end]:rounded-2xl has-data-[align=block-start]:rounded-2xl has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[textarea]:rounded-xl 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-2 py-2 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-4xl **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-3 has-[>button]:ml-[-0.25rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\": \"pr-3 has-[>button]:mr-[-0.25rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-3 pt-3 group-has-[>input]/input-group:pt-3 [.border-b]:pb-3 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-3 pb-3 group-has-[>input]/input-group:pb-3 [.border-t]:pt-3 order-last w-full justify-start\",\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  \"gap-2 rounded-4xl text-sm shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 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        \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1\", className)}\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(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/lib/utils\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport { Textarea } from \"@/registry/base-maia/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        \"border-input bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-4xl border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-2xl has-data-[align=block-start]:rounded-2xl has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[textarea]:rounded-xl 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-2 py-2 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-4xl **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-3 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\": \"pr-3 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-3 pt-3 group-has-[>input]/input-group:pt-3 [.border-b]:pb-3 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-3 pb-3 group-has-[>input]/input-group:pb-3 [.border-t]:pt-3 order-last w-full justify-start\",\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  \"gap-2 rounded-4xl text-sm shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 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        \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1\", className)}\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(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/item.json b/apps/v4/public/r/styles/base-maia/item.json
index 234bd12e9a..af9c1e27fc 100644
--- a/apps/v4/public/r/styles/base-maia/item.json
+++ b/apps/v4/public/r/styles/base-maia/item.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-maia/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-maia/lib/utils\"\nimport { Separator } from \"@/registry/base-maia/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        \"gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2 group/item-group flex w-full flex-col\",\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  \"[a]:hover:bg-muted rounded-2xl border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\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 [[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  \"gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-10 overflow-hidden rounded-lg group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 group-data-[size=xs]/item:rounded-md [&_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        \"gap-1 group-data-[size=xs]/item:gap-0.5 flex flex-1 flex-col [&+[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        \"gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\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        \"text-muted-foreground text-left text-sm [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\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(\"gap-2 flex items-center\", 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        \"gap-2 flex basis-full items-center justify-between\",\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        \"gap-2 flex basis-full items-center justify-between\",\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",
+      "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-maia/lib/utils\"\nimport { Separator } from \"@/registry/base-maia/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        \"gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col\",\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  \"[a]:hover:bg-muted rounded-2xl border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\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  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-10 overflow-hidden rounded-lg group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 group-data-[size=xs]/item:rounded-md [&_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        \"gap-1 group-data-[size=xs]/item:gap-0.5 flex flex-1 flex-col [&+[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        \"gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\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        \"text-muted-foreground text-left text-sm [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\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(\"gap-2 flex items-center\", 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        \"gap-2 flex basis-full items-center justify-between\",\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        \"gap-2 flex basis-full items-center justify-between\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/kbd.json b/apps/v4/public/r/styles/base-maia/kbd.json
index 937955fc6d..d035330da5 100644
--- a/apps/v4/public/r/styles/base-maia/kbd.json
+++ b/apps/v4/public/r/styles/base-maia/kbd.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/kbd.tsx",
-      "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\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(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
+      "content": "import { cn } from \"@/registry/base-maia/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\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(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/menubar-example.json b/apps/v4/public/r/styles/base-maia/menubar-example.json
index a0189021d3..a1cb8bf320 100644
--- a/apps/v4/public/r/styles/base-maia/menubar-example.json
+++ b/apps/v4/public/r/styles/base-maia/menubar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/menubar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-maia/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/base-maia/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    </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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport { Button } from \"@/registry/base-maia/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-maia/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-maia/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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/menubar.json b/apps/v4/public/r/styles/base-maia/menubar.json
index 6dbe52b976..b96dfde977 100644
--- a/apps/v4/public/r/styles/base-maia/menubar.json
+++ b/apps/v4/public/r/styles/base-maia/menubar.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-maia/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-maia/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-maia/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(\"bg-background h-9 rounded-2xl border p-1 flex items-center\", className)}\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        \"hover:bg-muted aria-expanded:bg-muted rounded-xl px-2.5 py-1 text-sm font-medium flex items-center outline-hidden select-none\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target\",\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(\"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-3 pl-8 text-sm data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none 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=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-3 pl-8 text-sm data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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  return (\n    <DropdownMenuLabel\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-3.5 py-2.5 text-xs data-[inset]:pl-8\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\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(\"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4\", className)}\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(\"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-32 rounded-2xl p-1 shadow-2xl ring-1 duration-100\", className)}\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",
+      "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-maia/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-maia/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(\"bg-background h-9 rounded-2xl border p-1 flex items-center\", className)}\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        \"hover:bg-muted aria-expanded:bg-muted rounded-xl px-2.5 py-1 text-sm font-medium flex items-center outline-hidden select-none\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target\",\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(\"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm data-disabled:opacity-50 data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 group/menubar-item\", className)}\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-3 pl-9.5 text-sm data-disabled:opacity-50 data-inset:pl-9.5 relative flex cursor-default items-center outline-hidden select-none 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=\"left-3 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-3 pl-9.5 text-sm data-disabled:opacity-50 data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-3 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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(\"text-muted-foreground px-3.5 py-2.5 text-xs data-inset:pl-9.5\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\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(\"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4\", className)}\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(\"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-32 rounded-2xl p-1 shadow-2xl ring-1 duration-100\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/navigation-menu.json b/apps/v4/public/r/styles/base-maia/navigation-menu.json
index a0cf4cd15e..16483e5c84 100644
--- a/apps/v4/public/r/styles/base-maia/navigation-menu.json
+++ b/apps/v4/public/r/styles/base-maia/navigation-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-maia/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-maia/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        \"max-w-max 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        \"gap-0 group flex flex-1 list-none items-center justify-center\",\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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\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-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-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-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/5 p-2.5 pr-3 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-2xl group-data-[viewport=false]/navigation-menu:shadow-2xl group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto transition-[opacity,transform,translate] duration-[0.35s] data-[ending-style]:opacity-0 data-[ending-style]:data-[activation-direction=left]:translate-x-[50%] data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%] **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none data-[starting-style]:opacity-0 data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] data-[starting-style]:data-[activation-direction=right]:translate-x-[50%]\",\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          \"transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[0.35s] data-[instant]:transition-none\",\n          className\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"bg-popover text-popover-foreground ring-foreground/5 rounded-2xl shadow ring-1 transition-all 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 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]\">\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(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-xl p-3 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\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",
+      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-maia/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        \"max-w-max 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        \"gap-0 group flex flex-1 list-none items-center justify-center\",\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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\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-open/navigation-menu-trigger:rotate-180 group-data-popup-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-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/5 p-2.5 pr-3 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-2xl group-data-[viewport=false]/navigation-menu:shadow-2xl group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto transition-[opacity,transform,translate] duration-[0.35s] data-ending-style:opacity-0 data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none data-starting-style:opacity-0 data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%]\",\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          \"transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] data-instant:transition-none\",\n          className\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"bg-popover text-popover-foreground ring-foreground/5 rounded-2xl shadow ring-1 transition-all 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 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]\">\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(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-xl p-3 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/resizable.json b/apps/v4/public/r/styles/base-maia/resizable.json
index c1ce996b73..7a405f10a1 100644
--- a/apps/v4/public/r/styles/base-maia/resizable.json
+++ b/apps/v4/public/r/styles/base-maia/resizable.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-maia/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        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 ring-offset-background 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=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-maia/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        \"bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 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=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/select.json b/apps/v4/public/r/styles/base-maia/select.json
index 380d210f5f..6ae145878e 100644
--- a/apps/v4/public/r/styles/base-maia/select.json
+++ b/apps/v4/public/r/styles/base-maia/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-maia/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-maia/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 p-1\", 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        \"border-input data-[placeholder]:text-muted-foreground bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-4xl border px-3 py-2 text-sm transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"text-muted-foreground size-4 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-36 rounded-2xl shadow-2xl ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none\",\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(\"text-muted-foreground px-3 py-2.5 text-xs\", className)}\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        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 gap-2 shrink-0 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\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(\"bg-border/50 -mx-1 my-1 h-px pointer-events-none\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/registry/base-maia/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 p-1\", 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        \"border-input data-placeholder:text-muted-foreground bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-4xl border px-3 py-2 text-sm transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"text-muted-foreground size-4 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-36 rounded-2xl shadow-2xl ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none\",\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(\"text-muted-foreground px-3 py-2.5 text-xs\", className)}\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        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 gap-2 shrink-0 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\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(\"bg-border/50 -mx-1 my-1 h-px pointer-events-none\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/separator.json b/apps/v4/public/r/styles/base-maia/separator.json
index d9b758b480..3bd613c48e 100644
--- a/apps/v4/public/r/styles/base-maia/separator.json
+++ b/apps/v4/public/r/styles/base-maia/separator.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/separator.tsx",
-      "content": "\"use client\"\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"@/registry/base-maia/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        \"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "content": "\"use client\"\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"@/registry/base-maia/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        \"bg-border shrink-0 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/tabs.json b/apps/v4/public/r/styles/base-maia/tabs.json
index a8bdfe1973..05192bb06e 100644
--- a/apps/v4/public/r/styles/base-maia/tabs.json
+++ b/apps/v4/public/r/styles/base-maia/tabs.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-maia/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-maia/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        \"gap-2 group/tabs flex data-[orientation=horizontal]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-4xl p-[3px] group-data-horizontal/tabs:h-9 group-data-vertical/tabs:rounded-2xl data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=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        \"gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium group-data-vertical/tabs:px-2.5 group-data-vertical/tabs:py-1.5 [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=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(\"text-sm flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
+      "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-maia/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        \"gap-2 group/tabs flex data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-4xl p-[3px] group-data-horizontal/tabs:h-9 group-data-vertical/tabs:rounded-2xl data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center 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        \"gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium group-data-vertical/tabs:px-2.5 group-data-vertical/tabs:py-1.5 [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute 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(\"text-sm flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/toggle-group.json b/apps/v4/public/r/styles/base-maia/toggle-group.json
index 3424e16513..e5650539c4 100644
--- a/apps/v4/public/r/styles/base-maia/toggle-group.json
+++ b/apps/v4/public/r/styles/base-maia/toggle-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-maia/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-maia/lib/utils\"\nimport { toggleVariants } from \"@/registry/base-maia/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        \"data-[spacing=0]:data-[variant=outline]:rounded-4xl group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=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        \"data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-3 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-4xl group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-xl group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-4xl group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-xl shrink-0 focus:z-10 focus-visible:z-10 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",
+      "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-maia/lib/utils\"\nimport { toggleVariants } from \"@/registry/base-maia/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        \"data-[spacing=0]:data-[variant=outline]:rounded-4xl group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] 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        \"data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-3 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-4xl group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-xl group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-4xl group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-xl shrink-0 focus:z-10 focus-visible:z-10 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/tooltip.json b/apps/v4/public/r/styles/base-maia/tooltip.json
index dc53b2e750..a89058cef0 100644
--- a/apps/v4/public/r/styles/base-maia/tooltip.json
+++ b/apps/v4/public/r/styles/base-maia/tooltip.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-maia/ui/tooltip.tsx",
-      "content": "\"use client\"\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\n\nimport { cn } from \"@/registry/base-maia/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 (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\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            \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-2xl px-3 py-1.5 text-xs **:data-[slot=kbd]:rounded-4xl data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px] 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 bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 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",
+      "content": "\"use client\"\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\n\nimport { cn } from \"@/registry/base-maia/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 (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\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            \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-2xl px-3 py-1.5 text-xs **:data-[slot=kbd]:rounded-4xl data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px] 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 bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/breadcrumb.json b/apps/v4/public/r/styles/base-mira/breadcrumb.json
index 5e9331ff4f..eed26d4e25 100644
--- a/apps/v4/public/r/styles/base-mira/breadcrumb.json
+++ b/apps/v4/public/r/styles/base-mira/breadcrumb.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/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-mira/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        \"text-muted-foreground gap-1.5 text-xs/relaxed flex flex-wrap items-center break-words\",\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(\"gap-1 inline-flex items-center\", 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(\"hover:text-foreground transition-colors\", 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(\"text-foreground font-normal\", 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        \"size-4 [&>svg]:size-3.5 flex items-center justify-center\",\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",
+      "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-mira/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        \"text-muted-foreground gap-1.5 text-xs/relaxed flex flex-wrap items-center wrap-break-word\",\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(\"gap-1 inline-flex items-center\", 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(\"hover:text-foreground transition-colors\", 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(\"text-foreground font-normal\", 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        \"size-4 [&>svg]:size-3.5 flex items-center justify-center\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/button-group.json b/apps/v4/public/r/styles/base-mira/button-group.json
index 20355ea325..09804bfce3 100644
--- a/apps/v4/public/r/styles/base-mira/button-group.json
+++ b/apps/v4/public/r/styles/base-mira/button-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-mira/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-mira/lib/utils\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 [&>[data-slot]]:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 [&>[data-slot]]: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  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"bg-muted gap-2 rounded-md border px-2.5 text-xs/relaxed font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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        \"bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=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 { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Separator } from \"@/registry/base-mira/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 *:data-slot:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 *:data-slot: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  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"bg-muted gap-2 rounded-md border px-2.5 text-xs/relaxed font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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        \"bg-input relative self-stretch 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/base-mira/button.json b/apps/v4/public/r/styles/base-mira/button.json
index 64c7e5dda1..6390ad1a64 100644
--- a/apps/v4/public/r/styles/base-mira/button.json
+++ b/apps/v4/public/r/styles/base-mira/button.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/button.tsx",
-      "content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium focus-visible:ring-[2px] aria-invalid:ring-[2px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline: \"border-border dark:bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost: \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive: \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        xs: \"h-5 gap-1 rounded-sm px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5\",\n        sm: \"h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        lg: \"h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4\",\n        icon: \"size-7 [&_svg:not([class*='size-'])]:size-3.5\",\n        \"icon-xs\": \"size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5\",\n        \"icon-sm\": \"size-6 [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-lg\": \"size-8 [&_svg:not([class*='size-'])]:size-4\",\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",
+      "content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium focus-visible:ring-2 aria-invalid:ring-2 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline: \"border-border dark:bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost: \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive: \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        xs: \"h-5 gap-1 rounded-sm px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5\",\n        sm: \"h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        lg: \"h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4\",\n        icon: \"size-7 [&_svg:not([class*='size-'])]:size-3.5\",\n        \"icon-xs\": \"size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5\",\n        \"icon-sm\": \"size-6 [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-lg\": \"size-8 [&_svg:not([class*='size-'])]:size-4\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/calendar-example.json b/apps/v4/public/r/styles/base-mira/calendar-example.json
index 4f9c51e550..8c5e32540c 100644
--- a/apps/v4/public/r/styles/base-mira/calendar-example.json
+++ b/apps/v4/public/r/styles/base-mira/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-mira/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-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/base-mira/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-mira/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-mira/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-mira/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    </ExampleWrapper>\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=\"bg-card border-t\">\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            <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            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\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",
+      "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-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/base-mira/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-mira/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-mira/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-mira/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=\"bg-card border-t\">\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/calendar.json b/apps/v4/public/r/styles/base-mira/calendar.json
index c0513272ca..3372892271 100644
--- a/apps/v4/public/r/styles/base-mira/calendar.json
+++ b/apps/v4/public/r/styles/base-mira/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/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-mira/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/base-mira/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        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(6)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[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          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\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          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) 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        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground 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:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "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-mira/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/base-mira/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        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(6)] bg-background group/calendar 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          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\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          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) 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        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground 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:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/chart.json b/apps/v4/public/r/styles/base-mira/chart.json
index 8fe74016c6..da6a799789 100644
--- a/apps/v4/public/r/styles/base-mira/chart.json
+++ b/apps/v4/public/r/styles/base-mira/chart.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\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  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\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          \"[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.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          {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  }) {\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 as keyof typeof config]?.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        \"border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs/relaxed shadow-xl grid min-w-[8rem] items-start\",\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={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\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 && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\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  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\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) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\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\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\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  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\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          \"[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.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          {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  }) {\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 as keyof typeof config]?.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(\"border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs/relaxed shadow-xl grid min-w-32 items-start\", className)}\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={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\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 && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\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  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\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) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\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\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/checkbox.json b/apps/v4/public/r/styles/base-mira/checkbox.json
index bdaedc6d93..9dc322c7f8 100644
--- a/apps/v4/public/r/styles/base-mira/checkbox.json
+++ b/apps/v4/public/r/styles/base-mira/checkbox.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/base-mira/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        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[2px] aria-invalid:ring-[2px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\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",
+      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/base-mira/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        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-2 aria-invalid:ring-2 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/combobox-example.json b/apps/v4/public/r/styles/base-mira/combobox-example.json
index 4068f0bd88..b0036c78f3 100644
--- a/apps/v4/public/r/styles/base-mira/combobox-example.json
+++ b/apps/v4/public/r/styles/base-mira/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/base-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/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-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/base-mira/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-mira/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-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      <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    </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\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=\"text-muted-foreground w-52 justify-between font-normal\"\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/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-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/base-mira/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-mira/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-mira/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-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      <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=\"text-muted-foreground w-52 justify-between font-normal\"\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/base-mira/combobox.json b/apps/v4/public/r/styles/base-mira/combobox.json
index 1ce366cf7f..deed34c186 100644
--- a/apps/v4/public/r/styles/base-mira/combobox.json
+++ b/apps/v4/public/r/styles/base-mira/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/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-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-mira/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-3.5\", 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=\"text-muted-foreground size-3.5 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/20 dark:bg-popover max-h-72 min-w-32 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-7 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target 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) data-[chips=true]:min-w-(--anchor-width)\",\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 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex items-center justify-center\" />}\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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\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(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-xs/relaxed group-data-empty/combobox-content:flex\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"bg-input/20 dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/30 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-7 flex-wrap items-center gap-1 rounded-md border bg-clip-padding px-2 py-0.5 text-xs/relaxed transition-colors focus-within:ring-[2px] has-aria-invalid:ring-[2px] has-data-[slot=combobox-chip]:px-1\", className)}\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        \"bg-muted-foreground/10 text-foreground flex h-[calc(--spacing(4.75))] w-fit items-center justify-center gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1.5 text-xs/relaxed font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\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(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-mira/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-3.5\", 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=\"text-muted-foreground size-3.5 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/20 dark:bg-popover max-h-72 min-w-32 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-7 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target 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) data-[chips=true]:min-w-(--anchor-width)\",\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 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex items-center justify-center\" />}\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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\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(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-xs/relaxed group-data-empty/combobox-content:flex\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"bg-input/20 dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/30 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-7 flex-wrap items-center gap-1 rounded-md border bg-clip-padding px-2 py-0.5 text-xs/relaxed transition-colors focus-within:ring-2 has-aria-invalid:ring-2 has-data-[slot=combobox-chip]:px-1\", className)}\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        \"bg-muted-foreground/10 text-foreground flex h-[calc(--spacing(4.75))] w-fit items-center justify-center gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1.5 text-xs/relaxed font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\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(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/command-example.json b/apps/v4/public/r/styles/base-mira/command-example.json
index cd3eb168b3..0db0b978b0 100644
--- a/apps/v4/public/r/styles/base-mira/command-example.json
+++ b/apps/v4/public/r/styles/base-mira/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/base-mira/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/base-mira/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { Card, CardContent } from \"@/registry/base-mira/ui/card\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/command.json b/apps/v4/public/r/styles/base-mira/command.json
index 674357b8e0..8588eb76a6 100644
--- a/apps/v4/public/r/styles/base-mira/command.json
+++ b/apps/v4/public/r/styles/base-mira/command.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-mira/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/base-mira/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        \"bg-popover text-popover-foreground rounded-xl p-1 flex size-full flex-col overflow-hidden\",\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(\n          \"rounded-xl! p-0 top-1/3 translate-y-0 overflow-hidden p-0\",\n          className\n        )}\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 pb-0\">\n      <InputGroup className=\"bg-input/20 dark:bg-input/30 h-8!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-xs/relaxed 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-3.5 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 outline-none overflow-x-hidden overflow-y-auto\",\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-xs/relaxed\", 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(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px\", 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        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-xs/relaxed outline-hidden select-none [&_svg:not([class*='size-'])]:size-3.5 [[data-slot=dialog-content]_&]:rounded-md group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-[0.625rem] tracking-widest\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-mira/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/base-mira/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        \"bg-popover text-popover-foreground rounded-xl p-1 flex size-full flex-col overflow-hidden\",\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(\n          \"rounded-xl! p-0 top-1/3 translate-y-0 overflow-hidden p-0\",\n          className\n        )}\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 pb-0\">\n      <InputGroup className=\"bg-input/20 dark:bg-input/30 h-8!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-xs/relaxed 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-3.5 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 outline-none overflow-x-hidden overflow-y-auto\",\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-xs/relaxed\", 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(\"text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2.5 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px\", 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        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-xs/relaxed outline-hidden select-none in-data-[slot=dialog-content]:rounded-md [&_svg:not([class*='size-'])]:size-3.5 group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-[0.625rem] tracking-widest\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/context-menu-example.json b/apps/v4/public/r/styles/base-mira/context-menu-example.json
index d0f64b458a..9d1951cbbe 100644
--- a/apps/v4/public/r/styles/base-mira/context-menu-example.json
+++ b/apps/v4/public/r/styles/base-mira/context-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/context-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\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-mira/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-mira/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    </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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\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-mira/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-mira/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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/context-menu.json b/apps/v4/public/r/styles/base-mira/context-menu.json
index 97760c2e44..89f76b5d8a 100644
--- a/apps/v4/public/r/styles/base-mira/context-menu.json
+++ b/apps/v4/public/r/styles/base-mira/context-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/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-mira/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            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none\",\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(\"text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none 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 right-2 flex items-center justify-center pointer-events-none\">\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  ...props\n}: ContextMenuPrimitive.RadioItem.Props) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\">\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest\", className)}\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",
+      "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-mira/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            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none\",\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(\"text-muted-foreground px-2 py-1.5 text-xs data-inset:pl-7.5\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"shadow-lg\"\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none 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 right-2 flex items-center justify-center pointer-events-none\">\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\">\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/dropdown-menu-example.json b/apps/v4/public/r/styles/base-mira/dropdown-menu-example.json
index 9226ee3300..39863c15e2 100644
--- a/apps/v4/public/r/styles/base-mira/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/base-mira/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-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/base-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      <DropdownMenuSides />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\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=\"text-muted-foreground truncate text-xs\">\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=\"text-muted-foreground ml-auto\"\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 DropdownMenuComplex() {\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=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\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=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\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({ ...notifications, email: checked === true })\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({ ...notifications, sms: checked === true })\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    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-mira/ui/avatar\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-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/base-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      <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=\"text-muted-foreground truncate text-xs\">\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=\"text-muted-foreground ml-auto\"\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 [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=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\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=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\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({ ...notifications, email: checked === true })\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({ ...notifications, sms: checked === true })\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    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/dropdown-menu.json b/apps/v4/public/r/styles/base-mira/dropdown-menu.json
index 1cbec92aeb..ac2463bfa8 100644
--- a/apps/v4/public/r/styles/base-mira/dropdown-menu.json
+++ b/apps/v4/public/r/styles/base-mira/dropdown-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/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-mira/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            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden\",\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(\"text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 w-auto\", className)}\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  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none 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\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"@/registry/base-mira/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            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden\",\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(\"text-muted-foreground px-2 py-1.5 text-xs data-inset:pl-7.5\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 w-auto\", className)}\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none 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\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/field-example.json b/apps/v4/public/r/styles/base-mira/field-example.json
index 97ec6b32aa..9957b73764 100644
--- a/apps/v4/public/r/styles/base-mira/field-example.json
+++ b/apps/v4/public/r/styles/base-mira/field-example.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/field-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Checkbox } from \"@/registry/base-mira/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-mira/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/base-mira/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/base-mira/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-mira/ui/select\"\nimport { Slider } from \"@/registry/base-mira/ui/slider\"\nimport { Switch } from \"@/registry/base-mira/ui/switch\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n    </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",
+      "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-mira/components/example\"\nimport { Badge } from \"@/registry/base-mira/ui/badge\"\nimport { Checkbox } from \"@/registry/base-mira/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-mira/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/base-mira/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/base-mira/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-mira/ui/select\"\nimport { Slider } from \"@/registry/base-mira/ui/slider\"\nimport { Switch } from \"@/registry/base-mira/ui/switch\"\nimport { Textarea } from \"@/registry/base-mira/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/field.json b/apps/v4/public/r/styles/base-mira/field.json
index f8fc981c33..2f5c4467d7 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(\"gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\", className)}\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(\"mb-2 font-medium data-[variant=label]:text-xs/relaxed data-[variant=legend]:text-sm\", className)}\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        \"gap-4 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\"data-[invalid=true]:text-destructive gap-2 group/field flex w-full\", {\n  variants: {\n    orientation: {\n      vertical:\n        \"flex-col [&>*]:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      responsive:\n        \"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\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        \"gap-0.5 group/field-content flex flex-1 flex-col 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        \"has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2 group/field-label peer/field-label flex w-fit leading-snug\",\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        \"gap-2 text-xs/relaxed font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\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-muted-foreground text-left text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\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(\"-my-2 h-5 text-xs/relaxed group-data-[variant=outline]/field-group:-mb-2 relative\", className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\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-destructive text-xs/relaxed font-normal\", 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(\"gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\", className)}\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(\"mb-2 font-medium data-[variant=label]:text-xs/relaxed data-[variant=legend]:text-sm\", className)}\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        \"gap-4 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\"data-[invalid=true]:text-destructive gap-2 group/field flex w-full\", {\n  variants: {\n    orientation: {\n      vertical:\n        \"flex-col *:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      responsive:\n        \"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\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        \"gap-0.5 group/field-content flex flex-1 flex-col 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        \"has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-2 group/field-label peer/field-label flex w-fit leading-snug\",\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        \"gap-2 text-xs/relaxed font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\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-muted-foreground text-left text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\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(\"-my-2 h-5 text-xs/relaxed group-data-[variant=outline]/field-group:-mb-2 relative\", className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\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-destructive text-xs/relaxed font-normal\", 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/input-group.json b/apps/v4/public/r/styles/base-mira/input-group.json
index e9c0f6ac44..9536e93299 100644
--- a/apps/v4/public/r/styles/base-mira/input-group.json
+++ b/apps/v4/public/r/styles/base-mira/input-group.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-mira/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-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Textarea } from \"@/registry/base-mira/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        \"border-input bg-input/20 dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-7 rounded-md border transition-colors has-data-[align=block-end]:rounded-md has-data-[align=block-start]:rounded-md has-[[data-slot=input-group-control]:focus-visible]:ring-[2px] has-[[data-slot][aria-invalid=true]]:ring-[2px] has-[textarea]:rounded-md 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-1 py-2 text-xs/relaxed font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-[calc(var(--radius-sm)-2px)] **:data-[slot=kbd]:px-1 **:data-[slot=kbd]:text-[0.625rem] [&>svg:not([class*='size-'])]:size-3.5 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.275rem] has-[>kbd]:ml-[-0.275rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.275rem] has-[>kbd]:mr-[-0.275rem] order-last\",\n        \"block-start\":\n          \"px-2 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\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  \"gap-2 rounded-md text-xs/relaxed shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-5 gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1 [&>svg:not([class*='size-'])]:size-3\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 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        \"text-muted-foreground gap-2 text-xs/relaxed [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1\", className)}\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(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport { Textarea } from \"@/registry/base-mira/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        \"border-input bg-input/20 dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-7 rounded-md border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-md has-data-[align=block-start]:rounded-md has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot][aria-invalid=true]]:ring-2 has-[textarea]:rounded-md 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-1 py-2 text-xs/relaxed font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-[calc(var(--radius-sm)-2px)] **:data-[slot=kbd]:px-1 **:data-[slot=kbd]:text-[0.625rem] [&>svg:not([class*='size-'])]:size-3.5 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.275rem] has-[>kbd]:ml-[-0.275rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.275rem] has-[>kbd]:mr-[-0.275rem] order-last\",\n        \"block-start\":\n          \"px-2 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\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  \"gap-2 rounded-md text-xs/relaxed shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-5 gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1 [&>svg:not([class*='size-'])]:size-3\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 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        \"text-muted-foreground gap-2 text-xs/relaxed [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1\", className)}\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(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/input-otp.json b/apps/v4/public/r/styles/base-mira/input-otp.json
index 6c19ca61ef..e450d6079a 100644
--- a/apps/v4/public/r/styles/base-mira/input-otp.json
+++ b/apps/v4/public/r/styles/base-mira/input-otp.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-mira/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-mira/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(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\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(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-[2px] flex items-center\", className)}\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        \"bg-input/20 dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/30 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-7 border-y border-r text-xs/relaxed transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-[2px] relative flex items-center justify-center data-[active=true]:z-10\",\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=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\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=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/base-mira/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(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\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(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-2 flex items-center\", className)}\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        \"bg-input/20 dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/30 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-7 border-y border-r text-xs/relaxed transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-2 relative flex items-center justify-center data-[active=true]:z-10\",\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=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\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=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/input.json b/apps/v4/public/r/styles/base-mira/input.json
index 95d2c95510..14379d0290 100644
--- a/apps/v4/public/r/styles/base-mira/input.json
+++ b/apps/v4/public/r/styles/base-mira/input.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/input.tsx",
-      "content": "import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"@/registry/base-mira/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        \"bg-input/20 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 rounded-md border px-2 py-0.5 text-sm transition-colors file:h-6 file:text-xs/relaxed file:font-medium focus-visible:ring-[2px] aria-invalid:ring-[2px] md:text-xs/relaxed file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
+      "content": "import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"@/registry/base-mira/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        \"bg-input/20 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 rounded-md border px-2 py-0.5 text-sm transition-colors file:h-6 file:text-xs/relaxed file:font-medium focus-visible:ring-2 aria-invalid:ring-2 md:text-xs/relaxed file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/item.json b/apps/v4/public/r/styles/base-mira/item.json
index 560a9c58a7..31861b92dd 100644
--- a/apps/v4/public/r/styles/base-mira/item.json
+++ b/apps/v4/public/r/styles/base-mira/item.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-mira/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-mira/lib/utils\"\nimport { Separator } from \"@/registry/base-mira/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        \"gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2 group/item-group flex w-full flex-col\",\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  \"[a]:hover:bg-muted rounded-md border text-xs/relaxed w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2.5 px-2.5 py-2 [[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  \"gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-8 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_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        \"gap-1 group-data-[size=xs]/item:gap-0.5 flex flex-1 flex-col [&+[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        \"gap-2 text-xs/relaxed leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\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        \"text-muted-foreground text-left text-xs/relaxed [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\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(\"gap-2 flex items-center\", 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        \"gap-2 flex basis-full items-center justify-between\",\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        \"gap-2 flex basis-full items-center justify-between\",\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",
+      "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-mira/lib/utils\"\nimport { Separator } from \"@/registry/base-mira/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        \"gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col\",\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  \"[a]:hover:bg-muted rounded-md border text-xs/relaxed w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2.5 px-2.5 py-2 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  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-8 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_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        \"gap-1 group-data-[size=xs]/item:gap-0.5 flex flex-1 flex-col [&+[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        \"gap-2 text-xs/relaxed leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\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        \"text-muted-foreground text-left text-xs/relaxed [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\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(\"gap-2 flex items-center\", 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        \"gap-2 flex basis-full items-center justify-between\",\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        \"gap-2 flex basis-full items-center justify-between\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/kbd.json b/apps/v4/public/r/styles/base-mira/kbd.json
index a7bda82ad4..e843767c43 100644
--- a/apps/v4/public/r/styles/base-mira/kbd.json
+++ b/apps/v4/public/r/styles/base-mira/kbd.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/kbd.tsx",
-      "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-xs px-1 font-sans text-[0.625rem] font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\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(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
+      "content": "import { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-xs px-1 font-sans text-[0.625rem] font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\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(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/menubar-example.json b/apps/v4/public/r/styles/base-mira/menubar-example.json
index 296703806a..369fa70e20 100644
--- a/apps/v4/public/r/styles/base-mira/menubar-example.json
+++ b/apps/v4/public/r/styles/base-mira/menubar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/menubar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-mira/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/base-mira/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    </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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport { Button } from \"@/registry/base-mira/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-mira/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-mira/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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/menubar.json b/apps/v4/public/r/styles/base-mira/menubar.json
index bd7ef429b9..e90771f2d1 100644
--- a/apps/v4/public/r/styles/base-mira/menubar.json
+++ b/apps/v4/public/r/styles/base-mira/menubar.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-mira/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-mira/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-mira/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(\"bg-background h-9 rounded-lg border p-1 flex items-center\", className)}\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        \"hover:bg-muted aria-expanded:bg-muted rounded-[calc(var(--radius-md)-2px)] px-2 py-[calc(--spacing(0.85))] text-xs/relaxed font-medium flex items-center outline-hidden select-none\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target\",\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(\"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-3.5 group/menubar-item\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-8 text-xs data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none 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=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-8 text-xs data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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  return (\n    <DropdownMenuLabel\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-[0.625rem] tracking-widest ml-auto\", className)}\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(\"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-3.5\", className)}\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(\"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100\", className)}\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",
+      "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-mira/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-mira/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(\"bg-background h-9 rounded-lg border p-1 flex items-center\", className)}\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        \"hover:bg-muted aria-expanded:bg-muted rounded-[calc(var(--radius-md)-2px)] px-2 py-[calc(--spacing(0.85))] text-xs/relaxed font-medium flex items-center outline-hidden select-none\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target\",\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(\"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-disabled:opacity-50 data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 group/menubar-item\", className)}\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-7.5 text-xs data-disabled:opacity-50 data-inset:pl-7.5 relative flex cursor-default items-center outline-hidden select-none 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=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-7.5 text-xs data-disabled:opacity-50 data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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(\"text-muted-foreground px-2 py-1.5 text-xs data-inset:pl-7.5\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-[0.625rem] tracking-widest ml-auto\", className)}\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(\"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5\", className)}\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(\"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/native-select.json b/apps/v4/public/r/styles/base-mira/native-select.json
index 46a1ab5364..32840084cc 100644
--- a/apps/v4/public/r/styles/base-mira/native-select.json
+++ b/apps/v4/public/r/styles/base-mira/native-select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-mira/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=\"border-input bg-input/20 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 w-full min-w-0 appearance-none rounded-md border py-0.5 pr-6 pl-2 text-xs/relaxed transition-colors select-none focus-visible:ring-[2px] aria-invalid:ring-[2px] data-[size=sm]:h-6 data-[size=sm]:text-[0.625rem] outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground top-1/2 right-1.5 size-3.5 -translate-y-1/2 group-data-[size=sm]/native-select:size-3 group-data-[size=sm]/native-select:-translate-y-[calc(--spacing(1.25))] pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\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(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-mira/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=\"border-input bg-input/20 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 w-full min-w-0 appearance-none rounded-md border py-0.5 pr-6 pl-2 text-xs/relaxed transition-colors select-none focus-visible:ring-2 aria-invalid:ring-2 data-[size=sm]:h-6 data-[size=sm]:text-[0.625rem] outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground top-1/2 right-1.5 size-3.5 -translate-y-1/2 group-data-[size=sm]/native-select:size-3 group-data-[size=sm]/native-select:-translate-y-[calc(--spacing(1.25))] pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\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(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/navigation-menu.json b/apps/v4/public/r/styles/base-mira/navigation-menu.json
index 8d7d6c0910..81eaaf1393 100644
--- a/apps/v4/public/r/styles/base-mira/navigation-menu.json
+++ b/apps/v4/public/r/styles/base-mira/navigation-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/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-mira/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        \"max-w-max 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        \"gap-0 group flex flex-1 list-none items-center justify-center\",\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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/30 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-2.5 py-1.5 text-xs/relaxed font-medium transition-all focus-visible:ring-[2px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\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-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-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-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1.5 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-xl group-data-[viewport=false]/navigation-menu:shadow-md group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto transition-[opacity,transform,translate] duration-[0.35s] data-[ending-style]:opacity-0 data-[ending-style]:data-[activation-direction=left]:translate-x-[50%] data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%] **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none data-[starting-style]:opacity-0 data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] data-[starting-style]:data-[activation-direction=right]:translate-x-[50%]\",\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          \"transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[0.35s] data-[instant]:transition-none\",\n          className\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"bg-popover text-popover-foreground ring-foreground/10 rounded-xl shadow ring-1 transition-all 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 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]\">\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(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/30 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-lg p-2 text-xs/relaxed transition-all outline-none focus-visible:ring-[2px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\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",
+      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-mira/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        \"max-w-max 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        \"gap-0 group flex flex-1 list-none items-center justify-center\",\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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/30 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-2.5 py-1.5 text-xs/relaxed font-medium transition-all focus-visible:ring-2 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\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-open/navigation-menu-trigger:rotate-180 group-data-popup-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-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1.5 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-xl group-data-[viewport=false]/navigation-menu:shadow-md group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto transition-[opacity,transform,translate] duration-[0.35s] data-ending-style:opacity-0 data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none data-starting-style:opacity-0 data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%]\",\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          \"transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] data-instant:transition-none\",\n          className\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"bg-popover text-popover-foreground ring-foreground/10 rounded-xl shadow ring-1 transition-all 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 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]\">\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(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/30 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-lg p-2 text-xs/relaxed transition-all outline-none focus-visible:ring-2 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/radio-group.json b/apps/v4/public/r/styles/base-mira/radio-group.json
index 6672953968..03795b1c99 100644
--- a/apps/v4/public/r/styles/base-mira/radio-group.json
+++ b/apps/v4/public/r/styles/base-mira/radio-group.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/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-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-3 w-full\", 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        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full transition-none focus-visible:ring-[2px] aria-invalid:ring-[2px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive flex size-4 items-center justify-center text-white\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          phosphor=\"CircleIcon\"\n          remixicon=\"RiCircleLine\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "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-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-3 w-full\", 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        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full transition-none focus-visible:ring-2 aria-invalid:ring-2 group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive flex size-4 items-center justify-center text-white\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          phosphor=\"CircleIcon\"\n          remixicon=\"RiCircleLine\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/resizable.json b/apps/v4/public/r/styles/base-mira/resizable.json
index 3684df933a..7c86b7f854 100644
--- a/apps/v4/public/r/styles/base-mira/resizable.json
+++ b/apps/v4/public/r/styles/base-mira/resizable.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-mira/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        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 ring-offset-background 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=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-mira/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        \"bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 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=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/select.json b/apps/v4/public/r/styles/base-mira/select.json
index 2b64b13b3b..a323f45fda 100644
--- a/apps/v4/public/r/styles/base-mira/select.json
+++ b/apps/v4/public/r/styles/base-mira/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/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-mira/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 p-1\", 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        \"border-input data-[placeholder]:text-muted-foreground bg-input/20 dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border px-2 py-1.5 text-xs/relaxed transition-colors focus-visible:ring-[2px] aria-invalid:ring-[2px] data-[size=default]:h-7 data-[size=sm]:h-6 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-3.5 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"text-muted-foreground size-3.5 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none\",\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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\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        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 gap-2 shrink-0 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex items-center justify-center\" />}\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(\"bg-border/50 -mx-1 my-1 h-px pointer-events-none\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5 top-0 w-full\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5 bottom-0 w-full\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/registry/base-mira/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 p-1\", 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        \"border-input data-placeholder:text-muted-foreground bg-input/20 dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border px-2 py-1.5 text-xs/relaxed transition-colors focus-visible:ring-2 aria-invalid:ring-2 data-[size=default]:h-7 data-[size=sm]:h-6 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-3.5 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"text-muted-foreground size-3.5 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none\",\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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\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        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 gap-2 shrink-0 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex items-center justify-center\" />}\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(\"bg-border/50 -mx-1 my-1 h-px pointer-events-none\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5 top-0 w-full\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5 bottom-0 w-full\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/separator.json b/apps/v4/public/r/styles/base-mira/separator.json
index 3761290cdf..0a4778eae1 100644
--- a/apps/v4/public/r/styles/base-mira/separator.json
+++ b/apps/v4/public/r/styles/base-mira/separator.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/separator.tsx",
-      "content": "\"use client\"\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"@/registry/base-mira/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        \"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "content": "\"use client\"\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"@/registry/base-mira/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        \"bg-border shrink-0 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/switch.json b/apps/v4/public/r/styles/base-mira/switch.json
index ae03115f7c..1b0e3ce6a6 100644
--- a/apps/v4/public/r/styles/base-mira/switch.json
+++ b/apps/v4/public/r/styles/base-mira/switch.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/switch.tsx",
-      "content": "\"use client\"\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\"\n\nimport { cn } from \"@/registry/base-mira/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        \"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-[2px] aria-invalid:ring-[2px] data-[size=default]:h-[16.6px] data-[size=default]:w-[28px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 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=\"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
+      "content": "\"use client\"\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\"\n\nimport { cn } from \"@/registry/base-mira/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        \"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-2 aria-invalid:ring-2 data-[size=default]:h-[16.6px] data-[size=default]:w-[28px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 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=\"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/tabs.json b/apps/v4/public/r/styles/base-mira/tabs.json
index 2875c22c09..2d2bbd0e7b 100644
--- a/apps/v4/public/r/styles/base-mira/tabs.json
+++ b/apps/v4/public/r/styles/base-mira/tabs.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/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-mira/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        \"gap-2 group/tabs flex data-[orientation=horizontal]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=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        \"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-xs font-medium group-data-vertical/tabs:py-[calc(--spacing(1.25))] [&_svg:not([class*='size-'])]:size-3.5 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=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(\"text-xs/relaxed flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
+      "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-mira/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        \"gap-2 group/tabs flex data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center 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        \"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-xs font-medium group-data-vertical/tabs:py-[calc(--spacing(1.25))] [&_svg:not([class*='size-'])]:size-3.5 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute 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(\"text-xs/relaxed flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/textarea.json b/apps/v4/public/r/styles/base-mira/textarea.json
index 67ba31a0bc..47a14797c7 100644
--- a/apps/v4/public/r/styles/base-mira/textarea.json
+++ b/apps/v4/public/r/styles/base-mira/textarea.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/textarea.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input bg-input/20 dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 resize-none rounded-md border px-2 py-2 text-sm transition-colors focus-visible:ring-[2px] aria-invalid:ring-[2px] md:text-xs/relaxed placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-mira/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input bg-input/20 dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 resize-none rounded-md border px-2 py-2 text-sm transition-colors focus-visible:ring-2 aria-invalid:ring-2 md:text-xs/relaxed placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/toggle-group.json b/apps/v4/public/r/styles/base-mira/toggle-group.json
index 661cf3fa70..e5d0d249d2 100644
--- a/apps/v4/public/r/styles/base-mira/toggle-group.json
+++ b/apps/v4/public/r/styles/base-mira/toggle-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-mira/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-mira/lib/utils\"\nimport { toggleVariants } from \"@/registry/base-mira/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        \"rounded-md data-[size=sm]:rounded-[min(var(--radius-md),8px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=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        \"group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md shrink-0 focus:z-10 focus-visible:z-10 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",
+      "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-mira/lib/utils\"\nimport { toggleVariants } from \"@/registry/base-mira/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        \"rounded-md data-[size=sm]:rounded-[min(var(--radius-md),8px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] 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        \"group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md shrink-0 focus:z-10 focus-visible:z-10 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/tooltip.json b/apps/v4/public/r/styles/base-mira/tooltip.json
index 22e2fcdc65..b12be36566 100644
--- a/apps/v4/public/r/styles/base-mira/tooltip.json
+++ b/apps/v4/public/r/styles/base-mira/tooltip.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-mira/ui/tooltip.tsx",
-      "content": "\"use client\"\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\n\nimport { cn } from \"@/registry/base-mira/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 (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\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            \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs **:data-[slot=kbd]:rounded-md data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 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-y-1/2 bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 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",
+      "content": "\"use client\"\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\n\nimport { cn } from \"@/registry/base-mira/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 (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\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            \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs **:data-[slot=kbd]:rounded-md data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 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-y-1/2 bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/accordion.json b/apps/v4/public/r/styles/base-nova/accordion.json
index 8164e1eadd..1571e56f47 100644
--- a/apps/v4/public/r/styles/base-nova/accordion.json
+++ b/apps/v4/public/r/styles/base-nova/accordion.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/base-nova/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          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\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=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-2.5 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_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",
+      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/base-nova/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          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\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=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-2.5 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/breadcrumb.json b/apps/v4/public/r/styles/base-nova/breadcrumb.json
index f6517f00c4..10a2356f7c 100644
--- a/apps/v4/public/r/styles/base-nova/breadcrumb.json
+++ b/apps/v4/public/r/styles/base-nova/breadcrumb.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/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-nova/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        \"text-muted-foreground gap-1.5 text-sm flex flex-wrap items-center break-words\",\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(\"gap-1 inline-flex items-center\", 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(\"hover:text-foreground transition-colors\", 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(\"text-foreground font-normal\", 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        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\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",
+      "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-nova/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        \"text-muted-foreground gap-1.5 text-sm flex flex-wrap items-center wrap-break-word\",\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(\"gap-1 inline-flex items-center\", 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(\"hover:text-foreground transition-colors\", 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(\"text-foreground font-normal\", 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        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/button-group.json b/apps/v4/public/r/styles/base-nova/button-group.json
index 394acca25d..9cc04b7be0 100644
--- a/apps/v4/public/r/styles/base-nova/button-group.json
+++ b/apps/v4/public/r/styles/base-nova/button-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-nova/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-nova/lib/utils\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 [&>[data-slot]]:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 [&>[data-slot]]: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  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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        \"bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=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 { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Separator } from \"@/registry/base-nova/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 *:data-slot:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 *:data-slot: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  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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        \"bg-input relative self-stretch 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/base-nova/button.json b/apps/v4/public/r/styles/base-nova/button.json
index ece204734b..5e6b920270 100644
--- a/apps/v4/public/r/styles/base-nova/button.json
+++ b/apps/v4/public/r/styles/base-nova/button.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/button.tsx",
-      "content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        outline: \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost: \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive: \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-8\",\n        \"icon-xs\": \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg\",\n        \"icon-lg\": \"size-9\",\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",
+      "content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        outline: \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost: \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive: \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-8\",\n        \"icon-xs\": \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg\",\n        \"icon-lg\": \"size-9\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/calendar-example.json b/apps/v4/public/r/styles/base-nova/calendar-example.json
index d1a418f8f6..85381dc396 100644
--- a/apps/v4/public/r/styles/base-nova/calendar-example.json
+++ b/apps/v4/public/r/styles/base-nova/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-nova/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-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/base-nova/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-nova/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-nova/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-nova/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-nova/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    </ExampleWrapper>\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=\"bg-card border-t\">\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            <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            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\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",
+      "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-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/base-nova/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-nova/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-nova/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-nova/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-nova/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=\"bg-card border-t\">\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/calendar.json b/apps/v4/public/r/styles/base-nova/calendar.json
index 7d4c0b16e6..c5cf78768c 100644
--- a/apps/v4/public/r/styles/base-nova/calendar.json
+++ b/apps/v4/public/r/styles/base-nova/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/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-nova/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/base-nova/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        \"p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[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          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\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          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) 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        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground 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:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "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-nova/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/base-nova/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        \"p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] bg-background group/calendar 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          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\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          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) 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        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground 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:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/chart.json b/apps/v4/public/r/styles/base-nova/chart.json
index 6c1524f92e..16ff6a3707 100644
--- a/apps/v4/public/r/styles/base-nova/chart.json
+++ b/apps/v4/public/r/styles/base-nova/chart.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\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  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\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          \"[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.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          {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  }) {\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 as keyof typeof config]?.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        \"border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl grid min-w-[8rem] items-start\",\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={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\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 && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\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  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\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) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\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\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\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  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\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          \"[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.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          {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  }) {\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 as keyof typeof config]?.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(\"border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl grid min-w-32 items-start\", className)}\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={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\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 && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\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  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\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) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\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\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/checkbox.json b/apps/v4/public/r/styles/base-nova/checkbox.json
index 8d0c307c5d..e00bbd6f63 100644
--- a/apps/v4/public/r/styles/base-nova/checkbox.json
+++ b/apps/v4/public/r/styles/base-nova/checkbox.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/base-nova/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        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\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",
+      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/base-nova/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        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/combobox-example.json b/apps/v4/public/r/styles/base-nova/combobox-example.json
index 5320d78051..b314959ebf 100644
--- a/apps/v4/public/r/styles/base-nova/combobox-example.json
+++ b/apps/v4/public/r/styles/base-nova/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/base-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/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-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/base-nova/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-nova/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-nova/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-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      <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    </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\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=\"text-muted-foreground w-52 justify-between font-normal\"\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/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-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/base-nova/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-nova/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-nova/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-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      <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=\"text-muted-foreground w-52 justify-between font-normal\"\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/base-nova/combobox.json b/apps/v4/public/r/styles/base-nova/combobox.json
index 372d9802b4..a71f1c6948 100644
--- a/apps/v4/public/r/styles/base-nova/combobox.json
+++ b/apps/v4/public/r/styles/base-nova/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/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-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-nova/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=\"text-muted-foreground size-4 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target 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) data-[chips=true]:min-w-(--anchor-width)\",\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 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\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(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1\", className)}\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        \"bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\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(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-nova/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=\"text-muted-foreground size-4 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target 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) data-[chips=true]:min-w-(--anchor-width)\",\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 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\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(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1\", className)}\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        \"bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\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(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/command-example.json b/apps/v4/public/r/styles/base-nova/command-example.json
index 7305cc4b40..550ecf4eb8 100644
--- a/apps/v4/public/r/styles/base-nova/command-example.json
+++ b/apps/v4/public/r/styles/base-nova/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/base-nova/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/base-nova/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { Card, CardContent } from \"@/registry/base-nova/ui/card\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/command.json b/apps/v4/public/r/styles/base-nova/command.json
index b79f52026f..aabcf7c6bc 100644
--- a/apps/v4/public/r/styles/base-nova/command.json
+++ b/apps/v4/public/r/styles/base-nova/command.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-nova/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/base-nova/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        \"bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden\",\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(\n          \"rounded-xl! top-1/3 translate-y-0 overflow-hidden p-0\",\n          className\n        )}\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 pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full 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 outline-none overflow-x-hidden overflow-y-auto\",\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(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\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(\"bg-border -mx-1 h-px\", 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        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-lg! group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-nova/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/base-nova/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        \"bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden\",\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(\n          \"rounded-xl! top-1/3 translate-y-0 overflow-hidden p-0\",\n          className\n        )}\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 pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full 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 outline-none overflow-x-hidden overflow-y-auto\",\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(\"text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium\", className)}\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(\"bg-border -mx-1 h-px\", 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        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! [&_svg:not([class*='size-'])]:size-4 group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/context-menu-example.json b/apps/v4/public/r/styles/base-nova/context-menu-example.json
index 2c38e3d439..724f35e18b 100644
--- a/apps/v4/public/r/styles/base-nova/context-menu-example.json
+++ b/apps/v4/public/r/styles/base-nova/context-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/context-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\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-nova/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-nova/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    </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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\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-nova/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-nova/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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/context-menu.json b/apps/v4/public/r/styles/base-nova/context-menu.json
index 7a94185c43..0a2af2ff3e 100644
--- a/apps/v4/public/r/styles/base-nova/context-menu.json
+++ b/apps/v4/public/r/styles/base-nova/context-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/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-nova/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            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none\",\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(\"text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:pl-8\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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=\"absolute right-2 pointer-events-none\">\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  ...props\n}: ContextMenuPrimitive.RadioItem.Props) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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",
+      "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-nova/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            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none\",\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(\"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"shadow-lg\"\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        \"focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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=\"absolute right-2 pointer-events-none\">\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        \"focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/dropdown-menu-example.json b/apps/v4/public/r/styles/base-nova/dropdown-menu-example.json
index d3ae9bfb41..6c66fadda4 100644
--- a/apps/v4/public/r/styles/base-nova/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/base-nova/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-nova/ui/avatar\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-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/base-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      <DropdownMenuSides />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\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=\"text-muted-foreground truncate text-xs\">\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=\"text-muted-foreground ml-auto\"\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 DropdownMenuComplex() {\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=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\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=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\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({ ...notifications, email: checked === true })\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({ ...notifications, sms: checked === true })\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    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-nova/ui/avatar\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-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/base-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      <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=\"text-muted-foreground truncate text-xs\">\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=\"text-muted-foreground ml-auto\"\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 [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=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\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=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\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({ ...notifications, email: checked === true })\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({ ...notifications, sms: checked === true })\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    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/dropdown-menu.json b/apps/v4/public/r/styles/base-nova/dropdown-menu.json
index 426a18dcd5..aac863ee8e 100644
--- a/apps/v4/public/r/styles/base-nova/dropdown-menu.json
+++ b/apps/v4/public/r/styles/base-nova/dropdown-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/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-nova/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            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden\",\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(\"text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:pl-8\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 w-auto\", className)}\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  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"@/registry/base-nova/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            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden\",\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(\"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 w-auto\", className)}\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/field-example.json b/apps/v4/public/r/styles/base-nova/field-example.json
index db50b9fee9..0cd4b33662 100644
--- a/apps/v4/public/r/styles/base-nova/field-example.json
+++ b/apps/v4/public/r/styles/base-nova/field-example.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/field-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport { Checkbox } from \"@/registry/base-nova/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-nova/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/base-nova/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/base-nova/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-nova/ui/select\"\nimport { Slider } from \"@/registry/base-nova/ui/slider\"\nimport { Switch } from \"@/registry/base-nova/ui/switch\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n    </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",
+      "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-nova/components/example\"\nimport { Badge } from \"@/registry/base-nova/ui/badge\"\nimport { Checkbox } from \"@/registry/base-nova/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-nova/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/base-nova/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/base-nova/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-nova/ui/select\"\nimport { Slider } from \"@/registry/base-nova/ui/slider\"\nimport { Switch } from \"@/registry/base-nova/ui/switch\"\nimport { Textarea } from \"@/registry/base-nova/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/field.json b/apps/v4/public/r/styles/base-nova/field.json
index 0c5eb49ca1..3172029fb0 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(\"gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\", className)}\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(\"mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\", className)}\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        \"gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\"data-[invalid=true]:text-destructive gap-2 group/field flex w-full\", {\n  variants: {\n    orientation: {\n      vertical:\n        \"flex-col [&>*]:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      responsive:\n        \"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\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        \"gap-0.5 group/field-content flex flex-1 flex-col 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        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit leading-snug\",\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        \"gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\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-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\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(\"-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative\", className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\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-destructive text-sm font-normal\", 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(\"gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\", className)}\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(\"mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\", className)}\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        \"gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\"data-[invalid=true]:text-destructive gap-2 group/field flex w-full\", {\n  variants: {\n    orientation: {\n      vertical:\n        \"flex-col *:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      responsive:\n        \"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\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        \"gap-0.5 group/field-content flex flex-1 flex-col 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        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit leading-snug\",\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        \"gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\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-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\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(\"-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative\", className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\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-destructive text-sm font-normal\", 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/input-group.json b/apps/v4/public/r/styles/base-nova/input-group.json
index 7813b897a3..7ad500ddfc 100644
--- a/apps/v4/public/r/styles/base-nova/input-group.json
+++ b/apps/v4/public/r/styles/base-nova/input-group.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-nova/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-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Textarea } from \"@/registry/base-nova/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        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\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  \"gap-2 text-sm shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-3px)] p-0 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        \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1\", className)}\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(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport { Textarea } from \"@/registry/base-nova/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        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\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  \"gap-2 text-sm shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-3px)] p-0 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        \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1\", className)}\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(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/input-otp.json b/apps/v4/public/r/styles/base-nova/input-otp.json
index 5f4179c1de..684d721d72 100644
--- a/apps/v4/public/r/styles/base-nova/input-otp.json
+++ b/apps/v4/public/r/styles/base-nova/input-otp.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-nova/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-nova/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(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\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(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-lg has-aria-invalid:ring-[3px] flex items-center\", className)}\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        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10\",\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=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\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=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/base-nova/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(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\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(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-lg has-aria-invalid:ring-3 flex items-center\", className)}\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        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:ring-3 relative flex items-center justify-center data-[active=true]:z-10\",\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=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\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=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/input.json b/apps/v4/public/r/styles/base-nova/input.json
index 0e6fcd7cd7..911ed25b86 100644
--- a/apps/v4/public/r/styles/base-nova/input.json
+++ b/apps/v4/public/r/styles/base-nova/input.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/input.tsx",
-      "content": "import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"@/registry/base-nova/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        \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
+      "content": "import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"@/registry/base-nova/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        \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/item.json b/apps/v4/public/r/styles/base-nova/item.json
index 7d93ec3aa2..f23d70be61 100644
--- a/apps/v4/public/r/styles/base-nova/item.json
+++ b/apps/v4/public/r/styles/base-nova/item.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-nova/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-nova/lib/utils\"\nimport { Separator } from \"@/registry/base-nova/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        \"gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2 group/item-group flex w-full flex-col\",\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  \"[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 [[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  \"gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_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        \"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[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        \"gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\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        \"text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\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(\"gap-2 flex items-center\", 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        \"gap-2 flex basis-full items-center justify-between\",\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        \"gap-2 flex basis-full items-center justify-between\",\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",
+      "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-nova/lib/utils\"\nimport { Separator } from \"@/registry/base-nova/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        \"gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col\",\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  \"[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 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  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_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        \"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[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        \"gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\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        \"text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\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(\"gap-2 flex items-center\", 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        \"gap-2 flex basis-full items-center justify-between\",\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        \"gap-2 flex basis-full items-center justify-between\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/kbd.json b/apps/v4/public/r/styles/base-nova/kbd.json
index 65c612f51b..01f355ca2b 100644
--- a/apps/v4/public/r/styles/base-nova/kbd.json
+++ b/apps/v4/public/r/styles/base-nova/kbd.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/kbd.tsx",
-      "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\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(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
+      "content": "import { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\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(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/menubar-example.json b/apps/v4/public/r/styles/base-nova/menubar-example.json
index a17246c53d..a2d6edbfa4 100644
--- a/apps/v4/public/r/styles/base-nova/menubar-example.json
+++ b/apps/v4/public/r/styles/base-nova/menubar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/menubar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-nova/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/base-nova/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    </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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport { Button } from \"@/registry/base-nova/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-nova/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-nova/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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/menubar.json b/apps/v4/public/r/styles/base-nova/menubar.json
index 00b41d3788..604aa25000 100644
--- a/apps/v4/public/r/styles/base-nova/menubar.json
+++ b/apps/v4/public/r/styles/base-nova/menubar.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-nova/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-nova/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-nova/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(\"bg-background h-8 gap-0.5 rounded-lg border p-[3px] flex items-center\", className)}\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        \"hover:bg-muted aria-expanded:bg-muted rounded-sm px-1.5 py-[2px] text-sm font-medium flex items-center outline-hidden select-none\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target\",\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(\"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none 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=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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  return (\n    <DropdownMenuLabel\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"px-1.5 py-1 text-sm font-medium data-[inset]:pl-8\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\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(\"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4\", className)}\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(\"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100\", className)}\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",
+      "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-nova/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-nova/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(\"bg-background h-8 gap-0.5 rounded-lg border p-[3px] flex items-center\", className)}\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        \"hover:bg-muted aria-expanded:bg-muted rounded-sm px-1.5 py-[2px] text-sm font-medium flex items-center outline-hidden select-none\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target\",\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(\"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/menubar-item\", className)}\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 data-inset:pl-7 relative flex cursor-default items-center outline-hidden select-none 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=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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(\"px-1.5 py-1 text-sm font-medium data-inset:pl-7\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\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(\"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4\", className)}\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(\"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/native-select.json b/apps/v4/public/r/styles/base-nova/native-select.json
index fe0f80eb34..d77cd2133e 100644
--- a/apps/v4/public/r/styles/base-nova/native-select.json
+++ b/apps/v4/public/r/styles/base-nova/native-select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-nova/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=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\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(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-nova/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=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\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(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/navigation-menu.json b/apps/v4/public/r/styles/base-nova/navigation-menu.json
index 51ae2ecd5b..8ac741d972 100644
--- a/apps/v4/public/r/styles/base-nova/navigation-menu.json
+++ b/apps/v4/public/r/styles/base-nova/navigation-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/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-nova/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        \"max-w-max 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        \"gap-0 group flex flex-1 list-none items-center justify-center\",\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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\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-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-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-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto transition-[opacity,transform,translate] duration-[0.35s] data-[ending-style]:opacity-0 data-[ending-style]:data-[activation-direction=left]:translate-x-[50%] data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%] **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none data-[starting-style]:opacity-0 data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] data-[starting-style]:data-[activation-direction=right]:translate-x-[50%]\",\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          \"transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[0.35s] data-[instant]:transition-none\",\n          className\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"bg-popover text-popover-foreground ring-foreground/10 rounded-lg shadow ring-1 transition-all 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 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]\">\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(\"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 [[data-slot=navigation-menu-content]_&]:rounded-md\", className)}\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\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",
+      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-nova/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        \"max-w-max 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        \"gap-0 group flex flex-1 list-none items-center justify-center\",\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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\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-open/navigation-menu-trigger:rotate-180 group-data-popup-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-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto transition-[opacity,transform,translate] duration-[0.35s] data-ending-style:opacity-0 data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none data-starting-style:opacity-0 data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%]\",\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          \"transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] data-instant:transition-none\",\n          className\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"bg-popover text-popover-foreground ring-foreground/10 rounded-lg shadow ring-1 transition-all 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 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]\">\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(\"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4\", className)}\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/radio-group.json b/apps/v4/public/r/styles/base-nova/radio-group.json
index 8ca2a6eaeb..6f78c1a2a3 100644
--- a/apps/v4/public/r/styles/base-nova/radio-group.json
+++ b/apps/v4/public/r/styles/base-nova/radio-group.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/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-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-2 w-full\", 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        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          phosphor=\"CircleIcon\"\n          remixicon=\"RiCircleLine\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "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-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-2 w-full\", 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        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-3 aria-invalid:ring-3 group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          phosphor=\"CircleIcon\"\n          remixicon=\"RiCircleLine\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/resizable.json b/apps/v4/public/r/styles/base-nova/resizable.json
index 806229059b..663eb5494e 100644
--- a/apps/v4/public/r/styles/base-nova/resizable.json
+++ b/apps/v4/public/r/styles/base-nova/resizable.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-nova/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        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 ring-offset-background 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=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-nova/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        \"bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 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=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/select.json b/apps/v4/public/r/styles/base-nova/select.json
index bf41e529b3..f30c667040 100644
--- a/apps/v4/public/r/styles/base-nova/select.json
+++ b/apps/v4/public/r/styles/base-nova/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/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-nova/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 p-1\", 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        \"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"text-muted-foreground size-4 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none\",\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(\"text-muted-foreground px-1.5 py-1 text-xs\", className)}\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        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 gap-2 shrink-0 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\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(\"bg-border -mx-1 my-1 h-px pointer-events-none\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/registry/base-nova/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 p-1\", 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        \"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"text-muted-foreground size-4 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none\",\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(\"text-muted-foreground px-1.5 py-1 text-xs\", className)}\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        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 gap-2 shrink-0 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\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(\"bg-border -mx-1 my-1 h-px pointer-events-none\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/separator.json b/apps/v4/public/r/styles/base-nova/separator.json
index dc49d54284..0e8a6f6217 100644
--- a/apps/v4/public/r/styles/base-nova/separator.json
+++ b/apps/v4/public/r/styles/base-nova/separator.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/separator.tsx",
-      "content": "\"use client\"\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"@/registry/base-nova/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        \"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "content": "\"use client\"\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"@/registry/base-nova/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        \"bg-border shrink-0 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/slider.json b/apps/v4/public/r/styles/base-nova/slider.json
index e716ad8bf5..58ec047318 100644
--- a/apps/v4/public/r/styles/base-nova/slider.json
+++ b/apps/v4/public/r/styles/base-nova/slider.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/slider.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"@/registry/base-nova/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 = 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      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=\"data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col\">\n        <SliderPrimitive.Track\n          data-slot=\"slider-track\"\n          className=\"bg-muted rounded-full data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1 relative grow overflow-hidden select-none\"\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=\"border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow] after:absolute after:-inset-2 hover:ring-[3px] focus-visible:ring-[3px] focus-visible:outline-hidden active:ring-[3px] block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50\"\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"@base-ui/react/slider\"\n\nimport { cn } from \"@/registry/base-nova/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 = 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      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=\"data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col\">\n        <SliderPrimitive.Track\n          data-slot=\"slider-track\"\n          className=\"bg-muted rounded-full data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1 relative grow overflow-hidden select-none\"\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=\"border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow] after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50\"\n          />\n        ))}\n      </SliderPrimitive.Control>\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/switch.json b/apps/v4/public/r/styles/base-nova/switch.json
index e6339f5d20..6464bb0b8d 100644
--- a/apps/v4/public/r/styles/base-nova/switch.json
+++ b/apps/v4/public/r/styles/base-nova/switch.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/switch.tsx",
-      "content": "\"use client\"\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\"\n\nimport { cn } from \"@/registry/base-nova/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        \"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 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=\"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
+      "content": "\"use client\"\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\"\n\nimport { cn } from \"@/registry/base-nova/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        \"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 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=\"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/tabs.json b/apps/v4/public/r/styles/base-nova/tabs.json
index abda3a72b4..71b3444a9c 100644
--- a/apps/v4/public/r/styles/base-nova/tabs.json
+++ b/apps/v4/public/r/styles/base-nova/tabs.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/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-nova/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        \"gap-2 group/tabs flex data-[orientation=horizontal]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=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        \"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=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(\"text-sm flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
+      "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-nova/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        \"gap-2 group/tabs flex data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center 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        \"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute 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(\"text-sm flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/textarea.json b/apps/v4/public/r/styles/base-nova/textarea.json
index 167449df80..b8f4e52217 100644
--- a/apps/v4/public/r/styles/base-nova/textarea.json
+++ b/apps/v4/public/r/styles/base-nova/textarea.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/textarea.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-nova/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/toggle-group.json b/apps/v4/public/r/styles/base-nova/toggle-group.json
index 46ee1b00f2..5290e51658 100644
--- a/apps/v4/public/r/styles/base-nova/toggle-group.json
+++ b/apps/v4/public/r/styles/base-nova/toggle-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-nova/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-nova/lib/utils\"\nimport { toggleVariants } from \"@/registry/base-nova/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        \"rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=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        \"group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg shrink-0 focus:z-10 focus-visible:z-10 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",
+      "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-nova/lib/utils\"\nimport { toggleVariants } from \"@/registry/base-nova/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        \"rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] 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        \"group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg shrink-0 focus:z-10 focus-visible:z-10 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/tooltip.json b/apps/v4/public/r/styles/base-nova/tooltip.json
index c2fc7938b4..90b6d6a9ea 100644
--- a/apps/v4/public/r/styles/base-nova/tooltip.json
+++ b/apps/v4/public/r/styles/base-nova/tooltip.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-nova/ui/tooltip.tsx",
-      "content": "\"use client\"\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\n\nimport { cn } from \"@/registry/base-nova/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 (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\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            \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 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-y-1/2 bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 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",
+      "content": "\"use client\"\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\n\nimport { cn } from \"@/registry/base-nova/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 (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\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            \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 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-y-1/2 bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/accordion.json b/apps/v4/public/r/styles/base-vega/accordion.json
index 13cfcdb5c3..e8aa2f44be 100644
--- a/apps/v4/public/r/styles/base-vega/accordion.json
+++ b/apps/v4/public/r/styles/base-vega/accordion.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/base-vega/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          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\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=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-4 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_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",
+      "content": "\"use client\"\n\nimport { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/base-vega/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          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\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=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-4 [&_a]:hover:text-foreground h-(--accordion-panel-height) data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/breadcrumb.json b/apps/v4/public/r/styles/base-vega/breadcrumb.json
index eff09c0b10..f96244aaa9 100644
--- a/apps/v4/public/r/styles/base-vega/breadcrumb.json
+++ b/apps/v4/public/r/styles/base-vega/breadcrumb.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/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-vega/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        \"text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center break-words\",\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(\"gap-1.5 inline-flex items-center\", 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(\"hover:text-foreground transition-colors\", 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(\"text-foreground font-normal\", 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        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\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",
+      "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-vega/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        \"text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center wrap-break-word\",\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(\"gap-1.5 inline-flex items-center\", 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(\"hover:text-foreground transition-colors\", 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(\"text-foreground font-normal\", 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        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/button-group.json b/apps/v4/public/r/styles/base-vega/button-group.json
index 88dde4af67..0b4ee52bb1 100644
--- a/apps/v4/public/r/styles/base-vega/button-group.json
+++ b/apps/v4/public/r/styles/base-vega/button-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-vega/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-vega/lib/utils\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 [&>[data-slot]]:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 [&>[data-slot]]: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  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"bg-muted gap-2 rounded-md border px-2.5 text-sm font-medium shadow-xs [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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        \"bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=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 { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Separator } from \"@/registry/base-vega/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0 *:data-slot:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! flex-col [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0 *:data-slot: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  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"bg-muted gap-2 rounded-md border px-2.5 text-sm font-medium shadow-xs [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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        \"bg-input relative self-stretch 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/base-vega/button.json b/apps/v4/public/r/styles/base-vega/button.json
index 55b5450a9c..ec5b344370 100644
--- a/apps/v4/public/r/styles/base-vega/button.json
+++ b/apps/v4/public/r/styles/base-vega/button.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/button.tsx",
-      "content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline: \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost: \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive: \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-9\",\n        \"icon-xs\": \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\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",
+      "content": "\"use client\"\n\nimport { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline: \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost: \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive: \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-9\",\n        \"icon-xs\": \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/calendar-example.json b/apps/v4/public/r/styles/base-vega/calendar-example.json
index c9d2fef4d8..93afa53bd8 100644
--- a/apps/v4/public/r/styles/base-vega/calendar-example.json
+++ b/apps/v4/public/r/styles/base-vega/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-vega/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-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/base-vega/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-vega/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-vega/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-vega/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-vega/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    </ExampleWrapper>\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=\"bg-card border-t\">\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            <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            {date ? format(date, \"PPP\") : <span>Pick a date</span>}\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",
+      "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-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/base-vega/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-vega/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/base-vega/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-vega/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/base-vega/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=\"bg-card border-t\">\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/calendar.json b/apps/v4/public/r/styles/base-vega/calendar.json
index 83d5104d47..a241958be1 100644
--- a/apps/v4/public/r/styles/base-vega/calendar.json
+++ b/apps/v4/public/r/styles/base-vega/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/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-vega/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/base-vega/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        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[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          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\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          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) 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        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground 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:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "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-vega/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/base-vega/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        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] bg-background group/calendar 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          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\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          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) 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        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground 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:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/chart.json b/apps/v4/public/r/styles/base-vega/chart.json
index b7fe94b896..421bb2e848 100644
--- a/apps/v4/public/r/styles/base-vega/chart.json
+++ b/apps/v4/public/r/styles/base-vega/chart.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\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  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\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          \"[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.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          {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  }) {\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 as keyof typeof config]?.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        \"border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl grid min-w-[8rem] items-start\",\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={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\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 && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\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  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\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) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\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\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\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  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\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          \"[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.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          {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  }) {\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 as keyof typeof config]?.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(\"border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl grid min-w-32 items-start\", className)}\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={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\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 && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\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  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\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) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\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\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/checkbox.json b/apps/v4/public/r/styles/base-vega/checkbox.json
index ef5fb00796..37b66eb4a2 100644
--- a/apps/v4/public/r/styles/base-vega/checkbox.json
+++ b/apps/v4/public/r/styles/base-vega/checkbox.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/checkbox.tsx",
-      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/base-vega/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        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border shadow-xs transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\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",
+      "content": "\"use client\"\n\nimport { Checkbox as CheckboxPrimitive } from \"@base-ui/react/checkbox\"\n\nimport { cn } from \"@/registry/base-vega/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        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border shadow-xs transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/combobox-example.json b/apps/v4/public/r/styles/base-vega/combobox-example.json
index 3bf7114ee7..6326604e64 100644
--- a/apps/v4/public/r/styles/base-vega/combobox-example.json
+++ b/apps/v4/public/r/styles/base-vega/combobox-example.json
@@ -17,7 +17,7 @@
   "files": [
     {
       "path": "registry/base-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/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-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/base-vega/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-vega/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-vega/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-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      <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    </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\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=\"text-muted-foreground w-52 justify-between font-normal\"\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/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Card, CardContent, CardFooter } from \"@/registry/base-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/base-vega/ui/combobox\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-vega/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/base-vega/ui/input-group\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-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      <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=\"text-muted-foreground w-52 justify-between font-normal\"\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/base-vega/combobox.json b/apps/v4/public/r/styles/base-vega/combobox.json
index 5c705ef8fc..5f3733fd75 100644
--- a/apps/v4/public/r/styles/base-vega/combobox.json
+++ b/apps/v4/public/r/styles/base-vega/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/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-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-vega/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=\"text-muted-foreground size-4 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-md shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target 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) data-[chips=true]:min-w-(--anchor-width)\",\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 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\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(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5\", className)}\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        \"bg-muted text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\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(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-vega/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=\"text-muted-foreground size-4 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-md shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target 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) data-[chips=true]:min-w-(--anchor-width)\",\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 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\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(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1.5\", className)}\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        \"bg-muted text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\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(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/command-example.json b/apps/v4/public/r/styles/base-vega/command-example.json
index 456f18ff59..f6fdae8248 100644
--- a/apps/v4/public/r/styles/base-vega/command-example.json
+++ b/apps/v4/public/r/styles/base-vega/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/base-vega/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/base-vega/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { Card, CardContent } from \"@/registry/base-vega/ui/card\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/command.json b/apps/v4/public/r/styles/base-vega/command.json
index 0e3476f719..024a60942f 100644
--- a/apps/v4/public/r/styles/base-vega/command.json
+++ b/apps/v4/public/r/styles/base-vega/command.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-vega/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/base-vega/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        \"bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden\",\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(\n          \"rounded-xl! top-1/3 translate-y-0 overflow-hidden p-0\",\n          className\n        )}\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 pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full 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 outline-none overflow-x-hidden overflow-y-auto\",\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(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\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(\"bg-border -mx-1 h-px w-auto\", 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        \"data-selected:bg-muted data-selected:text-foreground data-selected:**:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-lg! group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-vega/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/base-vega/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        \"bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden\",\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(\n          \"rounded-xl! top-1/3 translate-y-0 overflow-hidden p-0\",\n          className\n        )}\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 pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full 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 outline-none overflow-x-hidden overflow-y-auto\",\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(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\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(\"bg-border -mx-1 h-px w-auto\", 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        \"data-selected:bg-muted data-selected:text-foreground data-selected:**:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! [&_svg:not([class*='size-'])]:size-4 group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/context-menu-example.json b/apps/v4/public/r/styles/base-vega/context-menu-example.json
index 9133e4f145..498df53ac2 100644
--- a/apps/v4/public/r/styles/base-vega/context-menu-example.json
+++ b/apps/v4/public/r/styles/base-vega/context-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/context-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\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-vega/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-vega/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    </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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\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-vega/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-vega/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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/context-menu.json b/apps/v4/public/r/styles/base-vega/context-menu.json
index 4790ece235..38a816d971 100644
--- a/apps/v4/public/r/styles/base-vega/context-menu.json
+++ b/apps/v4/public/r/styles/base-vega/context-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/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-vega/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            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-md p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none\",\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(\"text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"shadow-lg\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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=\"absolute right-2 pointer-events-none\">\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  ...props\n}: ContextMenuPrimitive.RadioItem.Props) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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",
+      "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-vega/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            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-md p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none\",\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(\"text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"shadow-lg\"\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        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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=\"absolute right-2 pointer-events-none\">\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        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/dropdown-menu-example.json b/apps/v4/public/r/styles/base-vega/dropdown-menu-example.json
index e4058b4afe..81cb0fc478 100644
--- a/apps/v4/public/r/styles/base-vega/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/base-vega/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-vega/ui/avatar\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-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/base-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      <DropdownMenuSides />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\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=\"text-muted-foreground truncate text-xs\">\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=\"text-muted-foreground ml-auto\"\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 DropdownMenuComplex() {\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=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\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=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\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({ ...notifications, email: checked === true })\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({ ...notifications, sms: checked === true })\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    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-vega/ui/avatar\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-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/base-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      <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=\"text-muted-foreground truncate text-xs\">\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=\"text-muted-foreground ml-auto\"\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 [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=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\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=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\n                            />\n                            Project Gamma\n                          </DropdownMenuItem>\n                          <DropdownMenuItem>\n                            <IconPlaceholder\n                              lucide=\"FileCodeIcon\"\n                              tabler=\"IconFileCode\"\n                              hugeicons=\"CodeIcon\"\n                              phosphor=\"FileCodeIcon\"\n                              remixicon=\"RiFileCodeLine\"\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({ ...notifications, email: checked === true })\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({ ...notifications, sms: checked === true })\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    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/dropdown-menu.json b/apps/v4/public/r/styles/base-vega/dropdown-menu.json
index 158293be98..1d6986865c 100644
--- a/apps/v4/public/r/styles/base-vega/dropdown-menu.json
+++ b/apps/v4/public/r/styles/base-vega/dropdown-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/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-vega/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            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-md p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden\",\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(\"text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 w-auto\", className)}\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  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"@/registry/base-vega/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            \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-md p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto outline-none data-closed:overflow-hidden\",\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(\"text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 data-popup-open:bg-accent data-popup-open:text-accent-foreground flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 w-auto\", className)}\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/field-example.json b/apps/v4/public/r/styles/base-vega/field-example.json
index e4c7633b7c..c230ad7e97 100644
--- a/apps/v4/public/r/styles/base-vega/field-example.json
+++ b/apps/v4/public/r/styles/base-vega/field-example.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/field-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Badge } from \"@/registry/base-vega/ui/badge\"\nimport { Checkbox } from \"@/registry/base-vega/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-vega/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/base-vega/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/base-vega/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-vega/ui/select\"\nimport { Slider } from \"@/registry/base-vega/ui/slider\"\nimport { Switch } from \"@/registry/base-vega/ui/switch\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n    </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",
+      "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-vega/components/example\"\nimport { Badge } from \"@/registry/base-vega/ui/badge\"\nimport { Checkbox } from \"@/registry/base-vega/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-vega/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/base-vega/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/base-vega/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-vega/ui/select\"\nimport { Slider } from \"@/registry/base-vega/ui/slider\"\nimport { Switch } from \"@/registry/base-vega/ui/switch\"\nimport { Textarea } from \"@/registry/base-vega/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/field.json b/apps/v4/public/r/styles/base-vega/field.json
index 59cc808ac2..69a10ce916 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(\"gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\", className)}\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(\"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\", className)}\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        \"gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\"data-[invalid=true]:text-destructive gap-3 group/field flex w-full\", {\n  variants: {\n    orientation: {\n      vertical:\n        \"flex-col [&>*]:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      responsive:\n        \"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\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        \"gap-1 group/field-content flex flex-1 flex-col 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        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-3 group/field-label peer/field-label flex w-fit leading-snug\",\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        \"gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\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-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\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(\"-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative\", className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\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-destructive text-sm font-normal\", 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(\"gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\", className)}\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(\"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\", className)}\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        \"gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\"data-[invalid=true]:text-destructive gap-3 group/field flex w-full\", {\n  variants: {\n    orientation: {\n      vertical:\n        \"flex-col *:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      responsive:\n        \"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\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        \"gap-1 group/field-content flex flex-1 flex-col 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        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3 group/field-label peer/field-label flex w-fit leading-snug\",\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        \"gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\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-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\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(\"-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative\", className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\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-destructive text-sm font-normal\", 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/input-group.json b/apps/v4/public/r/styles/base-vega/input-group.json
index dd228184ac..cfbd18377a 100644
--- a/apps/v4/public/r/styles/base-vega/input-group.json
+++ b/apps/v4/public/r/styles/base-vega/input-group.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-vega/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-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Textarea } from \"@/registry/base-vega/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        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-md border shadow-xs transition-[color,box-shadow] has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.25rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.25rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\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  \"gap-2 text-sm shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-5px)] p-0 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        \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1\", className)}\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(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport { Textarea } from \"@/registry/base-vega/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        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-md border shadow-xs transition-[color,box-shadow] in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.25rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.25rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\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  \"gap-2 text-sm shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-5px)] p-0 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        \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1\", className)}\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(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/input-otp.json b/apps/v4/public/r/styles/base-vega/input-otp.json
index 9905bc42ce..5bacca7a8e 100644
--- a/apps/v4/public/r/styles/base-vega/input-otp.json
+++ b/apps/v4/public/r/styles/base-vega/input-otp.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-vega/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-vega/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(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\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(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-[3px] flex items-center\", className)}\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        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-9 border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10\",\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=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\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=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/base-vega/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(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\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(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-3 flex items-center\", className)}\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        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-9 border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-3 relative flex items-center justify-center data-[active=true]:z-10\",\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=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\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=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/input.json b/apps/v4/public/r/styles/base-vega/input.json
index bd5e5a8c8e..24a7b2ee9e 100644
--- a/apps/v4/public/r/styles/base-vega/input.json
+++ b/apps/v4/public/r/styles/base-vega/input.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/input.tsx",
-      "content": "import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"@/registry/base-vega/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        \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
+      "content": "import * as React from \"react\"\nimport { Input as InputPrimitive } from \"@base-ui/react/input\"\n\nimport { cn } from \"@/registry/base-vega/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        \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/item.json b/apps/v4/public/r/styles/base-vega/item.json
index 6650bcd97e..948b3199d2 100644
--- a/apps/v4/public/r/styles/base-vega/item.json
+++ b/apps/v4/public/r/styles/base-vega/item.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-vega/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-vega/lib/utils\"\nimport { Separator } from \"@/registry/base-vega/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        \"gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2 group/item-group flex w-full flex-col\",\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  \"[a]:hover:bg-muted rounded-md border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 [[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  \"gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_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        \"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[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        \"gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\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        \"text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\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(\"gap-2 flex items-center\", 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        \"gap-2 flex basis-full items-center justify-between\",\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        \"gap-2 flex basis-full items-center justify-between\",\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",
+      "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-vega/lib/utils\"\nimport { Separator } from \"@/registry/base-vega/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        \"gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col\",\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  \"[a]:hover:bg-muted rounded-md border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 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  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_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        \"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[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        \"gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\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        \"text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\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(\"gap-2 flex items-center\", 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        \"gap-2 flex basis-full items-center justify-between\",\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        \"gap-2 flex basis-full items-center justify-between\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/kbd.json b/apps/v4/public/r/styles/base-vega/kbd.json
index 0cb9818735..e1d8fca39c 100644
--- a/apps/v4/public/r/styles/base-vega/kbd.json
+++ b/apps/v4/public/r/styles/base-vega/kbd.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/kbd.tsx",
-      "content": "import { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\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(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
+      "content": "import { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\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(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/menubar-example.json b/apps/v4/public/r/styles/base-vega/menubar-example.json
index f2e796ee5e..8c8056f70d 100644
--- a/apps/v4/public/r/styles/base-vega/menubar-example.json
+++ b/apps/v4/public/r/styles/base-vega/menubar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/menubar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-vega/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/base-vega/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    </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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport { Button } from \"@/registry/base-vega/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-vega/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-vega/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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/menubar.json b/apps/v4/public/r/styles/base-vega/menubar.json
index 3718c913f5..3e314d1bd9 100644
--- a/apps/v4/public/r/styles/base-vega/menubar.json
+++ b/apps/v4/public/r/styles/base-vega/menubar.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-vega/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-vega/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-vega/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(\"bg-background h-9 gap-1 rounded-md border p-1 shadow-xs flex items-center\", className)}\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        \"hover:bg-muted aria-expanded:bg-muted rounded-sm px-2 py-1 text-sm font-medium flex items-center outline-hidden select-none\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-md p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target\",\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(\"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none 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=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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  ...props\n}: MenuPrimitive.RadioItem.Props) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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  return (\n    <DropdownMenuLabel\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\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(\"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4\", className)}\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(\"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-md p-1 shadow-lg ring-1 duration-100\", className)}\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",
+      "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-vega/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-vega/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(\"bg-background h-9 gap-1 rounded-md border p-1 shadow-xs flex items-center\", className)}\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        \"hover:bg-muted aria-expanded:bg-muted rounded-sm px-2 py-1 text-sm font-medium flex items-center outline-hidden select-none\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-md p-1 shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target\",\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(\"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-disabled:opacity-50 data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item\", className)}\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm data-disabled:opacity-50 data-inset:pl-8 relative flex cursor-default items-center outline-hidden select-none 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=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm data-disabled:opacity-50 data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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(\"px-2 py-1.5 text-sm font-medium data-inset:pl-8\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\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(\"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4\", className)}\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(\"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-md p-1 shadow-lg ring-1 duration-100\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/native-select.json b/apps/v4/public/r/styles/base-vega/native-select.json
index 3760ce3ae3..16103c3301 100644
--- a/apps/v4/public/r/styles/base-vega/native-select.json
+++ b/apps/v4/public/r/styles/base-vega/native-select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-vega/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=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=sm]:h-8 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\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(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-vega/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=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-8 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\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(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/navigation-menu.json b/apps/v4/public/r/styles/base-vega/navigation-menu.json
index ad48c6190c..6ec5c1d16a 100644
--- a/apps/v4/public/r/styles/base-vega/navigation-menu.json
+++ b/apps/v4/public/r/styles/base-vega/navigation-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/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-vega/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        \"max-w-max 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        \"gap-0 group flex flex-1 list-none items-center justify-center\",\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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-4 py-2 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\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-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-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-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-2 pr-2.5 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto transition-[opacity,transform,translate] duration-[0.35s] data-[ending-style]:opacity-0 data-[ending-style]:data-[activation-direction=left]:translate-x-[50%] data-[ending-style]:data-[activation-direction=right]:translate-x-[-50%] **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none data-[starting-style]:opacity-0 data-[starting-style]:data-[activation-direction=left]:translate-x-[-50%] data-[starting-style]:data-[activation-direction=right]:translate-x-[50%]\",\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          \"transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-[var(--positioner-height)] w-[var(--positioner-width)] max-w-[var(--available-width)] transition-[top,left,right,bottom] duration-[0.35s] data-[instant]:transition-none\",\n          className\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"bg-popover text-popover-foreground ring-foreground/10 rounded-lg shadow ring-1 transition-all 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 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]\">\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(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\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",
+      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-vega/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        \"max-w-max 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        \"gap-0 group flex flex-1 list-none items-center justify-center\",\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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-4 py-2 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\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-open/navigation-menu-trigger:rotate-180 group-data-popup-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-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-2 pr-2.5 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 h-full w-auto transition-[opacity,transform,translate] duration-[0.35s] data-ending-style:opacity-0 data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none data-starting-style:opacity-0 data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%]\",\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          \"transition-[top,left,right,bottom] duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0 isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] data-instant:transition-none\",\n          className\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"bg-popover text-popover-foreground ring-foreground/10 rounded-lg shadow ring-1 transition-all 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 data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)]\">\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(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/radio-group.json b/apps/v4/public/r/styles/base-vega/radio-group.json
index 5b53b3f16c..0ea050a7fd 100644
--- a/apps/v4/public/r/styles/base-vega/radio-group.json
+++ b/apps/v4/public/r/styles/base-vega/radio-group.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/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-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-3 w-full\", 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        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full shadow-xs focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          phosphor=\"CircleIcon\"\n          remixicon=\"RiCircleLine\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "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-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction RadioGroup({ className, ...props }: RadioGroupPrimitive.Props) {\n  return (\n    <RadioGroupPrimitive\n      data-slot=\"radio-group\"\n      className={cn(\"grid gap-3 w-full\", 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        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full shadow-xs focus-visible:ring-3 aria-invalid:ring-3 group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          phosphor=\"CircleIcon\"\n          remixicon=\"RiCircleLine\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioPrimitive.Indicator>\n    </RadioPrimitive.Root>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/resizable.json b/apps/v4/public/r/styles/base-vega/resizable.json
index 2419a9fcbb..63a8755c38 100644
--- a/apps/v4/public/r/styles/base-vega/resizable.json
+++ b/apps/v4/public/r/styles/base-vega/resizable.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-vega/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        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 ring-offset-background 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=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/base-vega/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        \"bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 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=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/select.json b/apps/v4/public/r/styles/base-vega/select.json
index 1a563300d5..7059eb2453 100644
--- a/apps/v4/public/r/styles/base-vega/select.json
+++ b/apps/v4/public/r/styles/base-vega/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/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-vega/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 p-1\", 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        \"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"text-muted-foreground size-4 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-md shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none\",\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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\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        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 gap-2 shrink-0 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\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(\"bg-border -mx-1 my-1 h-px pointer-events-none\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/registry/base-vega/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 p-1\", 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        \"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"text-muted-foreground size-4 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-md shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target relative isolate z-50 max-h-(--available-height) w-(--anchor-width) origin-(--transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none\",\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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\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        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 gap-2 shrink-0 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\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(\"bg-border -mx-1 my-1 h-px pointer-events-none\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 top-0 w-full\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4 bottom-0 w-full\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/separator.json b/apps/v4/public/r/styles/base-vega/separator.json
index c442016869..b25b112a9e 100644
--- a/apps/v4/public/r/styles/base-vega/separator.json
+++ b/apps/v4/public/r/styles/base-vega/separator.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/separator.tsx",
-      "content": "\"use client\"\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"@/registry/base-vega/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        \"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "content": "\"use client\"\n\nimport { Separator as SeparatorPrimitive } from \"@base-ui/react/separator\"\n\nimport { cn } from \"@/registry/base-vega/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        \"bg-border shrink-0 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/switch.json b/apps/v4/public/r/styles/base-vega/switch.json
index 619fc89b16..98b7b40dc5 100644
--- a/apps/v4/public/r/styles/base-vega/switch.json
+++ b/apps/v4/public/r/styles/base-vega/switch.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/switch.tsx",
-      "content": "\"use client\"\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\"\n\nimport { cn } from \"@/registry/base-vega/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        \"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent shadow-xs focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 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=\"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
+      "content": "\"use client\"\n\nimport { Switch as SwitchPrimitive } from \"@base-ui/react/switch\"\n\nimport { cn } from \"@/registry/base-vega/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        \"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent shadow-xs focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 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=\"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/tabs.json b/apps/v4/public/r/styles/base-vega/tabs.json
index ae052164f1..ee2035f476 100644
--- a/apps/v4/public/r/styles/base-vega/tabs.json
+++ b/apps/v4/public/r/styles/base-vega/tabs.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/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-vega/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        \"gap-2 group/tabs flex data-[orientation=horizontal]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-lg p-[3px] group-data-horizontal/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=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        \"gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=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(\"text-sm flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
+      "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-vega/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        \"gap-2 group/tabs flex data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-lg p-[3px] group-data-horizontal/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center 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        \"gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute 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(\"text-sm flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/textarea.json b/apps/v4/public/r/styles/base-vega/textarea.json
index 0361534201..eaddd4a751 100644
--- a/apps/v4/public/r/styles/base-vega/textarea.json
+++ b/apps/v4/public/r/styles/base-vega/textarea.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/textarea.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-vega/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/toggle-group.json b/apps/v4/public/r/styles/base-vega/toggle-group.json
index 65920456a5..5772d1fe27 100644
--- a/apps/v4/public/r/styles/base-vega/toggle-group.json
+++ b/apps/v4/public/r/styles/base-vega/toggle-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-vega/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-vega/lib/utils\"\nimport { toggleVariants } from \"@/registry/base-vega/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        \"rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=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        \"data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md shrink-0 focus:z-10 focus-visible:z-10 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",
+      "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-vega/lib/utils\"\nimport { toggleVariants } from \"@/registry/base-vega/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        \"rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] 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        \"data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md shrink-0 focus:z-10 focus-visible:z-10 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/tooltip.json b/apps/v4/public/r/styles/base-vega/tooltip.json
index da48c8a80b..62912f79ee 100644
--- a/apps/v4/public/r/styles/base-vega/tooltip.json
+++ b/apps/v4/public/r/styles/base-vega/tooltip.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-vega/ui/tooltip.tsx",
-      "content": "\"use client\"\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\n\nimport { cn } from \"@/registry/base-vega/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 (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\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            \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 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-y-1/2 bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 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",
+      "content": "\"use client\"\n\nimport { Tooltip as TooltipPrimitive } from \"@base-ui/react/tooltip\"\n\nimport { cn } from \"@/registry/base-vega/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 (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\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            \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 bg-foreground text-background z-50 w-fit max-w-xs origin-(--transform-origin)\",\n            className\n          )}\n          {...props}\n        >\n          {children}\n          <TooltipPrimitive.Arrow className=\"size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 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-y-1/2 bg-foreground fill-foreground z-50 data-[side=bottom]:top-1 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/breadcrumb.json b/apps/v4/public/r/styles/radix-lyra/breadcrumb.json
index 4939c7a136..c9d3f42018 100644
--- a/apps/v4/public/r/styles/radix-lyra/breadcrumb.json
+++ b/apps/v4/public/r/styles/radix-lyra/breadcrumb.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/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        \"text-muted-foreground gap-1.5 text-xs flex flex-wrap items-center break-words\",\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(\"gap-1 inline-flex items-center\", 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(\"hover:text-foreground transition-colors\", 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(\"text-foreground font-normal\", 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        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\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",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/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        \"text-muted-foreground gap-1.5 text-xs flex flex-wrap items-center wrap-break-word\",\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(\"gap-1 inline-flex items-center\", 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(\"hover:text-foreground transition-colors\", 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(\"text-foreground font-normal\", 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        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\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"
     }
   ],
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 859f94ded4..bd59c7bfae 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  \"rounded-none has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[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        \"bg-muted gap-2 rounded-none border px-2.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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        \"bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=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  \"rounded-none has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[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        \"bg-muted gap-2 rounded-none border px-2.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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        \"bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=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/calendar-example.json b/apps/v4/public/r/styles/radix-lyra/calendar-example.json
index 29a80bbb92..720392f3b4 100644
--- a/apps/v4/public/r/styles/radix-lyra/calendar-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/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-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/radix-lyra/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-lyra/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-lyra/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-lyra/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    </ExampleWrapper>\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=\"bg-card border-t\">\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",
+      "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-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/radix-lyra/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-lyra/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-lyra/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-lyra/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-lyra/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=\"bg-card border-t\">\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/calendar.json b/apps/v4/public/r/styles/radix-lyra/calendar.json
index 07baef4f42..e54fc5f8ac 100644
--- a/apps/v4/public/r/styles/radix-lyra/calendar.json
+++ b/apps/v4/public/r/styles/radix-lyra/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/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-lyra/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/radix-lyra/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        \"p-2 [--cell-size:--spacing(7)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[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          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\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          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) 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        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground 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:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "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-lyra/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/radix-lyra/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        \"p-2 [--cell-size:--spacing(7)] bg-background group/calendar 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          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\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          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) 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        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground 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:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/chart.json b/apps/v4/public/r/styles/radix-lyra/chart.json
index 2fa606e121..9c12dddb37 100644
--- a/apps/v4/public/r/styles/radix-lyra/chart.json
+++ b/apps/v4/public/r/styles/radix-lyra/chart.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\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  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\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          \"[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.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          {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  }) {\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 as keyof typeof config]?.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        \"border-border/50 bg-background gap-1.5 rounded-none border px-2.5 py-1.5 text-xs shadow-xl grid min-w-[8rem] items-start\",\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={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\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 && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\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  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\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) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\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\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\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  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\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          \"[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.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          {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  }) {\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 as keyof typeof config]?.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        \"border-border/50 bg-background gap-1.5 rounded-none border px-2.5 py-1.5 text-xs shadow-xl grid min-w-32 items-start\",\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={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\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 && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\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  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\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) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\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\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
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 f674cdd90a..d6bd3f66ce 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    </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\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=\"text-muted-foreground w-52 justify-between font-normal\"\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=\"text-muted-foreground w-52 justify-between font-normal\"\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/combobox.json b/apps/v4/public/r/styles/radix-lyra/combobox.json
index 97a414607d..b013f123d3 100644
--- a/apps/v4/public/r/styles/radix-lyra/combobox.json
+++ b/apps/v4/public/r/styles/radix-lyra/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/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-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-lyra/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=\"text-muted-foreground size-4 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-none shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target 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) data-[chips=true]:min-w-(--anchor-width)\",\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 overflow-y-auto data-empty:p-0 overflow-y-auto overscroll-contain\",\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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\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(\"text-muted-foreground px-2 py-2 text-xs\", className)}\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(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-xs group-data-empty/combobox-content:flex\", className)}\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(\"bg-border -mx-1 h-px\", 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(\"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-none border bg-transparent bg-clip-padding px-2.5 py-1 text-xs transition-colors focus-within:ring-1 has-aria-invalid:ring-1 has-data-[slot=combobox-chip]:px-1\", className)}\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        \"bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-none px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\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(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-lyra/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=\"text-muted-foreground size-4 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-none shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target 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) data-[chips=true]:min-w-(--anchor-width)\",\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 overflow-y-auto data-empty:p-0 overflow-y-auto overscroll-contain\",\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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\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(\"text-muted-foreground px-2 py-2 text-xs\", className)}\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(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-xs group-data-empty/combobox-content:flex\", className)}\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(\"bg-border -mx-1 h-px\", 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(\"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-none border bg-transparent bg-clip-padding px-2.5 py-1 text-xs transition-colors focus-within:ring-1 has-aria-invalid:ring-1 has-data-[slot=combobox-chip]:px-1\", className)}\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        \"bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-none px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\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(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/command-example.json b/apps/v4/public/r/styles/radix-lyra/command-example.json
index df233b43e1..c80f096b40 100644
--- a/apps/v4/public/r/styles/radix-lyra/command-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/radix-lyra/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/radix-lyra/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { Card, CardContent } from \"@/registry/radix-lyra/ui/card\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/command.json b/apps/v4/public/r/styles/radix-lyra/command.json
index 5a5de58eba..c33dfd54e7 100644
--- a/apps/v4/public/r/styles/radix-lyra/command.json
+++ b/apps/v4/public/r/styles/radix-lyra/command.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/radix-lyra/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        \"bg-popover text-popover-foreground rounded-none flex size-full flex-col overflow-hidden\",\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(\n          \"rounded-none top-1/3 translate-y-0 overflow-hidden p-0\",\n          className\n        )}\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=\"border-b pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8 border-none shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-xs 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-0 outline-none overflow-x-hidden overflow-y-auto\",\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-xs\", 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(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs\", className)}\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(\"bg-border -mx-1 h-px\", 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        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-none! group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/radix-lyra/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        \"bg-popover text-popover-foreground rounded-none flex size-full flex-col overflow-hidden\",\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(\n          \"rounded-none top-1/3 translate-y-0 overflow-hidden p-0\",\n          className\n        )}\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=\"border-b pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8 border-none shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-xs 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-0 outline-none overflow-x-hidden overflow-y-auto\",\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-xs\", 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(\"text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs\", className)}\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(\"bg-border -mx-1 h-px\", 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        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none in-data-[slot=dialog-content]:rounded-none! [&_svg:not([class*='size-'])]:size-4 group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/context-menu-example.json b/apps/v4/public/r/styles/radix-lyra/context-menu-example.json
index 4e4940d8d8..6377954e56 100644
--- a/apps/v4/public/r/styles/radix-lyra/context-menu-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/context-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/context-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 { Button } from \"@/registry/radix-lyra/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-lyra/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/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    </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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\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-lyra/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/context-menu.json b/apps/v4/public/r/styles/radix-lyra/context-menu.json
index 34e370bcb9..b7a1fb2989 100644
--- a/apps/v4/public/r/styles/radix-lyra/context-menu.json
+++ b/apps/v4/public/r/styles/radix-lyra/context-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/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-lyra/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          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-none shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-none border shadow-lg duration-100 cn-menu-target z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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=\"absolute right-2 pointer-events-none\">\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  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\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(\"text-muted-foreground px-2 py-2 text-xs data-[inset]:pl-8\", className)}\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(\"bg-border -mx-1 h-px\", 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(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/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          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-none shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-none border shadow-lg duration-100 cn-menu-target z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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=\"absolute right-2 pointer-events-none\">\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        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\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(\"text-muted-foreground px-2 py-2 text-xs data-inset:pl-7\", className)}\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(\"bg-border -mx-1 h-px\", 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(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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"
     }
   ],
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 9a5629a8cb..212e1e1f4e 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    </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>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</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=\"text-muted-foreground truncate text-xs\">\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=\"text-muted-foreground ml-auto\"\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 DropdownMenuComplex() {\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=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\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({ ...notifications, email: checked === true })\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({ ...notifications, sms: checked === true })\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    </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>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</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=\"text-muted-foreground truncate text-xs\">\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=\"text-muted-foreground ml-auto\"\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 [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=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\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({ ...notifications, email: checked === true })\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({ ...notifications, sms: checked === true })\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    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/dropdown-menu.json b/apps/v4/public/r/styles/radix-lyra/dropdown-menu.json
index c483d79475..4c07790f06 100644
--- a/apps/v4/public/r/styles/radix-lyra/dropdown-menu.json
+++ b/apps/v4/public/r/styles/radix-lyra/dropdown-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/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-lyra/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          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-none shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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(\"text-muted-foreground px-2 py-2 text-xs data-[inset]:pl-8\", className)}\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(\"bg-border -mx-1 h-px\", 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(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-none shadow-lg ring-1 duration-100 cn-menu-target z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden\",\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/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          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-none shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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(\"text-muted-foreground px-2 py-2 text-xs data-inset:pl-7\", className)}\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(\"bg-border -mx-1 h-px\", 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(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-none shadow-lg ring-1 duration-100 cn-menu-target z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/field-example.json b/apps/v4/public/r/styles/radix-lyra/field-example.json
index dfd5b6fcfd..49066d514a 100644
--- a/apps/v4/public/r/styles/radix-lyra/field-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/field-example.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/field-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-lyra/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-lyra/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-lyra/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-lyra/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport { Slider } from \"@/registry/radix-lyra/ui/slider\"\nimport { Switch } from \"@/registry/radix-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"us\">United States</SelectItem>\n              <SelectItem value=\"uk\">United Kingdom</SelectItem>\n              <SelectItem value=\"ca\">Canada</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"utc\">UTC</SelectItem>\n              <SelectItem value=\"est\">Eastern Time</SelectItem>\n              <SelectItem value=\"pst\">Pacific Time</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-lyra/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-lyra/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-lyra/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-lyra/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport { Slider } from \"@/registry/radix-lyra/ui/slider\"\nimport { Switch } from \"@/registry/radix-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"us\">United States</SelectItem>\n              <SelectItem value=\"uk\">United Kingdom</SelectItem>\n              <SelectItem value=\"ca\">Canada</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"utc\">UTC</SelectItem>\n              <SelectItem value=\"est\">Eastern Time</SelectItem>\n              <SelectItem value=\"pst\">Pacific Time</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction HorizontalFields() {\n  return (\n    <Example title=\"Horizontal Fields\">\n      <FieldGroup className=\"**:data-[slot=field-content]:min-w-48\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-input\">Username</FieldLabel>\n            <FieldDescription>Enter your preferred username.</FieldDescription>\n          </FieldContent>\n          <Input id=\"horizontal-input\" placeholder=\"johndoe\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-textarea\">Bio</FieldLabel>\n            <FieldDescription>\n              Write a short description about yourself.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"horizontal-textarea\"\n            placeholder=\"Tell us about yourself...\"\n          />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-switch\">\n              Email Notifications\n            </FieldLabel>\n            <FieldDescription>\n              Receive email updates about your account.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"horizontal-switch\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-select\">Favorite Fruit</FieldLabel>\n            <FieldDescription>Choose your favorite fruit.</FieldDescription>\n          </FieldContent>\n          <Select>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"orange\">Orange</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-native-select\">Country</FieldLabel>\n            <FieldDescription>Select your country.</FieldDescription>\n          </FieldContent>\n          <NativeSelect id=\"horizontal-native-select\">\n            <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-slider\">Volume</FieldLabel>\n            <FieldDescription>Adjust the volume level.</FieldDescription>\n          </FieldContent>\n          <Slider id=\"horizontal-slider\" defaultValue={[50]} max={100} />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/field.json b/apps/v4/public/r/styles/radix-lyra/field.json
index 9fe85ee59c..3131e6f72a 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(\"gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\", className)}\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(\"mb-2.5 font-medium data-[variant=label]:text-xs data-[variant=legend]:text-sm\", className)}\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        \"gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\"data-[invalid=true]:text-destructive gap-2 group/field flex w-full\", {\n  variants: {\n    orientation: {\n      vertical:\n        \"flex-col [&>*]:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      responsive:\n        \"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\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        \"gap-0.5 group/field-content flex flex-1 flex-col 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        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2 group/field-label peer/field-label flex w-fit leading-snug\",\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        \"gap-2 text-xs/relaxed group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\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-muted-foreground text-left text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\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(\"-my-2 h-5 text-xs group-data-[variant=outline]/field-group:-mb-2 relative\", className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\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-destructive text-xs font-normal\", 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(\"gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\", className)}\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(\"mb-2.5 font-medium data-[variant=label]:text-xs data-[variant=legend]:text-sm\", className)}\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        \"gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\"data-[invalid=true]:text-destructive gap-2 group/field flex w-full\", {\n  variants: {\n    orientation: {\n      vertical:\n        \"flex-col *:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      responsive:\n        \"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\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        \"gap-0.5 group/field-content flex flex-1 flex-col 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        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-2 group/field-label peer/field-label flex w-fit leading-snug\",\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        \"gap-2 text-xs/relaxed group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\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-muted-foreground text-left text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\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(\"-my-2 h-5 text-xs group-data-[variant=outline]/field-group:-mb-2 relative\", className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\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-destructive text-xs font-normal\", 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/input-group.json b/apps/v4/public/r/styles/radix-lyra/input-group.json
index 4b79efd3f9..589dea9735 100644
--- a/apps/v4/public/r/styles/radix-lyra/input-group.json
+++ b/apps/v4/public/r/styles/radix-lyra/input-group.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/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-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport { Textarea } from \"@/registry/radix-lyra/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        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-none border transition-colors has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot][aria-invalid=true]]:ring-1 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-xs font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-none [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\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  \"gap-2 text-xs shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-none px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 rounded-none p-0 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        \"text-muted-foreground gap-2 text-xs [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1\", className)}\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(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-lyra/lib/utils\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport { Textarea } from \"@/registry/radix-lyra/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        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-none border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot][aria-invalid=true]]:ring-1 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-xs font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-none [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\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  \"gap-2 text-xs shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-none px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 rounded-none p-0 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        \"text-muted-foreground gap-2 text-xs [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1\", className)}\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(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/item.json b/apps/v4/public/r/styles/radix-lyra/item.json
index fa4f397ab1..eb1e62db08 100644
--- a/apps/v4/public/r/styles/radix-lyra/item.json
+++ b/apps/v4/public/r/styles/radix-lyra/item.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/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-lyra/lib/utils\"\nimport { Separator } from \"@/registry/radix-lyra/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        \"gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2 group/item-group flex w-full flex-col\",\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  \"[a]:hover:bg-muted rounded-none border text-xs w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 [[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  \"gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-10 overflow-hidden rounded-none group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_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        \"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[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        \"gap-2 text-xs font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\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        \"text-muted-foreground text-left text-xs/relaxed group-data-[size=xs]/item:text-xs/relaxed [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\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(\"gap-2 flex items-center\", 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        \"gap-2 flex basis-full items-center justify-between\",\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        \"gap-2 flex basis-full items-center justify-between\",\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",
+      "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-lyra/lib/utils\"\nimport { Separator } from \"@/registry/radix-lyra/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        \"gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col\",\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  \"[a]:hover:bg-muted rounded-none border text-xs w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 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  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-10 overflow-hidden rounded-none group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_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        \"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[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        \"gap-2 text-xs font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\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        \"text-muted-foreground text-left text-xs/relaxed group-data-[size=xs]/item:text-xs/relaxed [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\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(\"gap-2 flex items-center\", 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        \"gap-2 flex basis-full items-center justify-between\",\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        \"gap-2 flex basis-full items-center justify-between\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/kbd.json b/apps/v4/public/r/styles/radix-lyra/kbd.json
index b8a3f061ba..cef1ea03af 100644
--- a/apps/v4/public/r/styles/radix-lyra/kbd.json
+++ b/apps/v4/public/r/styles/radix-lyra/kbd.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/kbd.tsx",
-      "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-none px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\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(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
+      "content": "import { cn } from \"@/registry/radix-lyra/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-none px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\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(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/menubar-example.json b/apps/v4/public/r/styles/radix-lyra/menubar-example.json
index e88730cee0..8cc5e4afe0 100644
--- a/apps/v4/public/r/styles/radix-lyra/menubar-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/menubar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/menubar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/radix-lyra/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    </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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/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-lyra/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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/menubar.json b/apps/v4/public/r/styles/radix-lyra/menubar.json
index 80aec4450c..63fe7295e7 100644
--- a/apps/v4/public/r/styles/radix-lyra/menubar.json
+++ b/apps/v4/public/r/styles/radix-lyra/menubar.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/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-lyra/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(\"bg-background h-8 gap-0.5 rounded-none border p-1 flex items-center\", className)}\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        \"hover:bg-muted aria-expanded:bg-muted rounded-none px-1.5 py-[calc(--spacing(0.8))] text-xs font-medium flex items-center outline-hidden select-none\",\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          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-none shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-2 pl-7 text-xs data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-2 pl-7 text-xs data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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(\"px-2 py-2 text-xs data-[inset]:pl-8\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-none shadow-lg ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/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(\"bg-background h-8 gap-0.5 rounded-none border p-1 flex items-center\", className)}\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        \"hover:bg-muted aria-expanded:bg-muted rounded-none px-1.5 py-[calc(--spacing(0.8))] text-xs font-medium flex items-center outline-hidden select-none\",\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          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-none shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-disabled:opacity-50 data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-28 pl-8 text-xs data-disabled:opacity-50 data-inset:pl-8 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-2 pl-8 text-xs data-disabled:opacity-50 data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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(\"px-2 py-2 text-xs data-inset:pl-8\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-none shadow-lg ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/navigation-menu.json b/apps/v4/public/r/styles/radix-lyra/navigation-menu.json
index 310d4e64d2..7f87f4aec1 100644
--- a/apps/v4/public/r/styles/radix-lyra/navigation-menu.json
+++ b/apps/v4/public/r/styles/radix-lyra/navigation-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/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-lyra/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        \"max-w-max 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        \"gap-0 group flex flex-1 list-none items-center justify-center\",\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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-none px-2.5 py-1.5 text-xs font-medium transition-all focus-visible:ring-1 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\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-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-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        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full 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 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\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          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 rounded-none shadow ring-1 duration-100 origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden md:w-[var(--radix-navigation-menu-viewport-width)]\",\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(\"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-none p-2 text-xs transition-all outline-none focus-visible:ring-1 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 [[data-slot=navigation-menu-content]_&]:rounded-none\", className)}\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-none shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\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",
+      "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-lyra/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        \"max-w-max 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        \"gap-0 group flex flex-1 list-none items-center justify-center\",\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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-none px-2.5 py-1.5 text-xs font-medium transition-all focus-visible:ring-1 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\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-open/navigation-menu-trigger:rotate-180 group-data-popup-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        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full 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 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\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          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 rounded-none shadow ring-1 duration-100 origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden md:w-(--radix-navigation-menu-viewport-width)\",\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(\"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-none p-2 text-xs transition-all outline-none focus-visible:ring-1 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none [&_svg:not([class*='size-'])]:size-4\", className)}\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-none shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/resizable.json b/apps/v4/public/r/styles/radix-lyra/resizable.json
index a345efa152..3e32e42eb9 100644
--- a/apps/v4/public/r/styles/radix-lyra/resizable.json
+++ b/apps/v4/public/r/styles/radix-lyra/resizable.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-lyra/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        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 ring-offset-background 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=\"bg-border h-6 w-1 rounded-none z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-lyra/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        \"bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 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=\"bg-border h-6 w-1 rounded-none z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/select.json b/apps/v4/public/r/styles/radix-lyra/select.json
index 5c3b0842f7..3bdd3b5015 100644
--- a/apps/v4/public/r/styles/radix-lyra/select.json
+++ b/apps/v4/public/r/styles/radix-lyra/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/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-lyra/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\", 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        \"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-none border bg-transparent py-2 pr-2 pl-2.5 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-none *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"text-muted-foreground size-4 pointer-events-none\"\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          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-none shadow-md ring-1 duration-100 cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none\",\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-[var(--radix-select-trigger-height)] data-[position=popper]:w-full data-[position=popper]:min-w-[var(--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(\"text-muted-foreground px-2 py-2 text-xs\", className)}\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        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"bg-border -mx-1 h-px pointer-events-none\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/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\", 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        \"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-none border bg-transparent py-2 pr-2 pl-2.5 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-none *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"text-muted-foreground size-4 pointer-events-none\"\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          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-none shadow-md ring-1 duration-100 cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none\",\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(\"text-muted-foreground px-2 py-2 text-xs\", className)}\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        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"bg-border -mx-1 h-px pointer-events-none\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/separator.json b/apps/v4/public/r/styles/radix-lyra/separator.json
index 6b31793ea6..ce9ac2b8dc 100644
--- a/apps/v4/public/r/styles/radix-lyra/separator.json
+++ b/apps/v4/public/r/styles/radix-lyra/separator.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/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-lyra/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        \"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/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        \"bg-border shrink-0 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/tabs.json b/apps/v4/public/r/styles/radix-lyra/tabs.json
index 706e789db7..b7e7a72798 100644
--- a/apps/v4/public/r/styles/radix-lyra/tabs.json
+++ b/apps/v4/public/r/styles/radix-lyra/tabs.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/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-lyra/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        \"gap-2 group/tabs flex data-[orientation=horizontal]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-none p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=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        \"gap-1.5 rounded-none border border-transparent px-1.5 py-0.5 text-xs font-medium group-data-vertical/tabs:py-[calc(--spacing(1.25))] [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=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(\"text-xs/relaxed flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
+      "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-lyra/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        \"gap-2 group/tabs flex data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-none p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center 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        \"gap-1.5 rounded-none border border-transparent px-1.5 py-0.5 text-xs font-medium group-data-vertical/tabs:py-[calc(--spacing(1.25))] [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute 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(\"text-xs/relaxed flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/toggle-group.json b/apps/v4/public/r/styles/radix-lyra/toggle-group.json
index d28109afc6..1d96685d0c 100644
--- a/apps/v4/public/r/styles/radix-lyra/toggle-group.json
+++ b/apps/v4/public/r/styles/radix-lyra/toggle-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/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-lyra/lib/utils\"\nimport { toggleVariants } from \"@/registry/radix-lyra/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        \"rounded-none data-[size=sm]:rounded-none group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=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        \"group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 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 shrink-0 focus:z-10 focus-visible:z-10 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",
+      "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-lyra/lib/utils\"\nimport { toggleVariants } from \"@/registry/radix-lyra/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        \"rounded-none data-[size=sm]:rounded-none group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] 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        \"group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 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 shrink-0 focus:z-10 focus-visible:z-10 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/tooltip.json b/apps/v4/public/r/styles/radix-lyra/tooltip.json
index bfd6e30aad..4eacc7789e 100644
--- a/apps/v4/public/r/styles/radix-lyra/tooltip.json
+++ b/apps/v4/public/r/styles/radix-lyra/tooltip.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/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-lyra/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 (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\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          \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-none px-3 py-1.5 text-xs bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin)\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-none bg-foreground fill-foreground z-50 translate-y-[calc(-50%_-_2px)]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-lyra/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 (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\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          \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-none px-3 py-1.5 text-xs bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin)\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-none bg-foreground fill-foreground z-50 translate-y-[calc(-50%_-_2px)]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/breadcrumb.json b/apps/v4/public/r/styles/radix-maia/breadcrumb.json
index 798c03d23f..0b4cb5a11a 100644
--- a/apps/v4/public/r/styles/radix-maia/breadcrumb.json
+++ b/apps/v4/public/r/styles/radix-maia/breadcrumb.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/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        \"text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center break-words\",\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(\"gap-1.5 inline-flex items-center\", 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(\"hover:text-foreground transition-colors\", 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(\"text-foreground font-normal\", 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        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\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",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/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        \"text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center wrap-break-word\",\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(\"gap-1.5 inline-flex items-center\", 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(\"hover:text-foreground transition-colors\", 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(\"text-foreground font-normal\", 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        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\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"
     }
   ],
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 444effc7c0..5eb7c67661 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  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-4xl flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-4xl! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-4xl! 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        \"bg-muted gap-2 rounded-4xl border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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        \"bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=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  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-4xl flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-4xl! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-4xl! 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        \"bg-muted gap-2 rounded-4xl border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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        \"bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=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/calendar-example.json b/apps/v4/public/r/styles/radix-maia/calendar-example.json
index 7c702f96c2..d3e41dc5ab 100644
--- a/apps/v4/public/r/styles/radix-maia/calendar-example.json
+++ b/apps/v4/public/r/styles/radix-maia/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-maia/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-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/radix-maia/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-maia/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-maia/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    </ExampleWrapper>\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=\"bg-card border-t\">\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",
+      "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-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/radix-maia/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-maia/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-maia/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-maia/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-maia/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=\"bg-card border-t\">\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/calendar.json b/apps/v4/public/r/styles/radix-maia/calendar.json
index d8671ad64a..1aba3d9887 100644
--- a/apps/v4/public/r/styles/radix-maia/calendar.json
+++ b/apps/v4/public/r/styles/radix-maia/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/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-maia/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/radix-maia/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        \"p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[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          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\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          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) 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        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground 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:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "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-maia/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/radix-maia/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        \"p-3 [--cell-radius:var(--radius-4xl)] [--cell-size:--spacing(8)] bg-background group/calendar 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          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\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          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) 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        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground 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:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/chart.json b/apps/v4/public/r/styles/radix-maia/chart.json
index 8ad3f6cdb5..0fc619a6c0 100644
--- a/apps/v4/public/r/styles/radix-maia/chart.json
+++ b/apps/v4/public/r/styles/radix-maia/chart.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\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  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\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          \"[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.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          {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  }) {\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 as keyof typeof config]?.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        \"border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl grid min-w-[8rem] items-start\",\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={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\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 && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\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  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\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) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\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\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\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  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\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          \"[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.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          {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  }) {\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 as keyof typeof config]?.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        \"border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl grid min-w-32 items-start\",\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={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\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 && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\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  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\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) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\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\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
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 2184c6fab4..3945598d77 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    </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\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=\"text-muted-foreground w-52 justify-between font-normal\"\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=\"text-muted-foreground w-52 justify-between font-normal\"\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/combobox.json b/apps/v4/public/r/styles/radix-maia/combobox.json
index 00d6e5cf59..f2a527cf98 100644
--- a/apps/v4/public/r/styles/radix-maia/combobox.json
+++ b/apps/v4/public/r/styles/radix-maia/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/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-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-maia/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=\"text-muted-foreground size-4 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 *:data-[slot=input-group]:bg-input/30 max-h-72 min-w-36 overflow-hidden rounded-2xl shadow-2xl ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-9 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target 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) data-[chips=true]:min-w-(--anchor-width)\",\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 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\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(\"text-muted-foreground px-3.5 py-2.5 text-xs\", className)}\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(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-4xl border bg-clip-padding px-2.5 py-1.5 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5\", className)}\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        \"bg-muted-foreground/10 text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-4xl px-2 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\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(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-maia/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=\"text-muted-foreground size-4 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 *:data-[slot=input-group]:bg-input/30 max-h-72 min-w-36 overflow-hidden rounded-2xl shadow-2xl ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-9 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target 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) data-[chips=true]:min-w-(--anchor-width)\",\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 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\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(\"text-muted-foreground px-3.5 py-2.5 text-xs\", className)}\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(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-4xl border bg-clip-padding px-2.5 py-1.5 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5\", className)}\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        \"bg-muted-foreground/10 text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-4xl px-2 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\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(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/command-example.json b/apps/v4/public/r/styles/radix-maia/command-example.json
index 037e12ed13..6cd1666a73 100644
--- a/apps/v4/public/r/styles/radix-maia/command-example.json
+++ b/apps/v4/public/r/styles/radix-maia/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/radix-maia/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/radix-maia/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { Card, CardContent } from \"@/registry/radix-maia/ui/card\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/command.json b/apps/v4/public/r/styles/radix-maia/command.json
index a615ccfa88..9b3fb63aa1 100644
--- a/apps/v4/public/r/styles/radix-maia/command.json
+++ b/apps/v4/public/r/styles/radix-maia/command.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/radix-maia/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        \"bg-popover text-popover-foreground rounded-4xl p-1 flex size-full flex-col overflow-hidden\",\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(\n          \"rounded-4xl! p-0 top-1/3 translate-y-0 overflow-hidden p-0\",\n          className\n        )}\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 pb-0\">\n      <InputGroup className=\"bg-input/30 h-9\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full 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 outline-none overflow-x-hidden overflow-y-auto\",\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(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\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(\"bg-border/50 my-1 h-px\", 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        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-lg px-3 py-2 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-2xl group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/radix-maia/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        \"bg-popover text-popover-foreground rounded-4xl p-1 flex size-full flex-col overflow-hidden\",\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(\n          \"rounded-4xl! p-0 top-1/3 translate-y-0 overflow-hidden p-0\",\n          className\n        )}\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 pb-0\">\n      <InputGroup className=\"bg-input/30 h-9\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full 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 outline-none overflow-x-hidden overflow-y-auto\",\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(\"text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium\", className)}\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(\"bg-border/50 my-1 h-px\", 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        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-lg px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-2xl [&_svg:not([class*='size-'])]:size-4 group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/context-menu-example.json b/apps/v4/public/r/styles/radix-maia/context-menu-example.json
index 76242484ca..0500d16e73 100644
--- a/apps/v4/public/r/styles/radix-maia/context-menu-example.json
+++ b/apps/v4/public/r/styles/radix-maia/context-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/context-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 { Button } from \"@/registry/radix-maia/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-maia/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/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    </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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\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-maia/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/context-menu.json b/apps/v4/public/r/styles/radix-maia/context-menu.json
index a83372ef4d..4f31fe2d7b 100644
--- a/apps/v4/public/r/styles/radix-maia/context-menu.json
+++ b/apps/v4/public/r/styles/radix-maia/context-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-maia/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-maia/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          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-md border p-1 shadow-lg duration-100 cn-menu-target z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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=\"absolute right-2 pointer-events-none\">\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  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\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(\"text-muted-foreground px-3 py-2.5 text-xs data-[inset]:pl-8\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/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          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-xl px-3 py-2 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-md border p-1 shadow-lg duration-100 cn-menu-target z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-xl py-2 pr-8 pl-3 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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=\"absolute right-2 pointer-events-none\">\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        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\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(\"text-muted-foreground px-3 py-2.5 text-xs data-inset:pl-9.5\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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"
     }
   ],
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 4ca3b6094a..a04ebff9ad 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    </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>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</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=\"text-muted-foreground truncate text-xs\">\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=\"text-muted-foreground ml-auto\"\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 DropdownMenuComplex() {\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=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\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({ ...notifications, email: checked === true })\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({ ...notifications, sms: checked === true })\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    </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>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</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=\"text-muted-foreground truncate text-xs\">\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=\"text-muted-foreground ml-auto\"\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 [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=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\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({ ...notifications, email: checked === true })\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({ ...notifications, sms: checked === true })\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    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/dropdown-menu.json b/apps/v4/public/r/styles/radix-maia/dropdown-menu.json
index 02533f6955..d07d9959d8 100644
--- a/apps/v4/public/r/styles/radix-maia/dropdown-menu.json
+++ b/apps/v4/public/r/styles/radix-maia/dropdown-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-maia/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-maia/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          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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(\"text-muted-foreground px-3 py-2.5 text-xs data-[inset]:pl-8\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-36 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden\",\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/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          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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(\"text-muted-foreground px-3 py-2.5 text-xs data-inset:pl-9.5\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 bg-popover text-popover-foreground min-w-36 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/field-example.json b/apps/v4/public/r/styles/radix-maia/field-example.json
index 4262ccf2fb..7f38a3973c 100644
--- a/apps/v4/public/r/styles/radix-maia/field-example.json
+++ b/apps/v4/public/r/styles/radix-maia/field-example.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/field-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-maia/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-maia/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-maia/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport { Slider } from \"@/registry/radix-maia/ui/slider\"\nimport { Switch } from \"@/registry/radix-maia/ui/switch\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"us\">United States</SelectItem>\n              <SelectItem value=\"uk\">United Kingdom</SelectItem>\n              <SelectItem value=\"ca\">Canada</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"utc\">UTC</SelectItem>\n              <SelectItem value=\"est\">Eastern Time</SelectItem>\n              <SelectItem value=\"pst\">Pacific Time</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-maia/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-maia/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-maia/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport { Slider } from \"@/registry/radix-maia/ui/slider\"\nimport { Switch } from \"@/registry/radix-maia/ui/switch\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"us\">United States</SelectItem>\n              <SelectItem value=\"uk\">United Kingdom</SelectItem>\n              <SelectItem value=\"ca\">Canada</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"utc\">UTC</SelectItem>\n              <SelectItem value=\"est\">Eastern Time</SelectItem>\n              <SelectItem value=\"pst\">Pacific Time</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction HorizontalFields() {\n  return (\n    <Example title=\"Horizontal Fields\">\n      <FieldGroup className=\"**:data-[slot=field-content]:min-w-48\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-input\">Username</FieldLabel>\n            <FieldDescription>Enter your preferred username.</FieldDescription>\n          </FieldContent>\n          <Input id=\"horizontal-input\" placeholder=\"johndoe\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-textarea\">Bio</FieldLabel>\n            <FieldDescription>\n              Write a short description about yourself.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"horizontal-textarea\"\n            placeholder=\"Tell us about yourself...\"\n          />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-switch\">\n              Email Notifications\n            </FieldLabel>\n            <FieldDescription>\n              Receive email updates about your account.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"horizontal-switch\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-select\">Favorite Fruit</FieldLabel>\n            <FieldDescription>Choose your favorite fruit.</FieldDescription>\n          </FieldContent>\n          <Select>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"orange\">Orange</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-native-select\">Country</FieldLabel>\n            <FieldDescription>Select your country.</FieldDescription>\n          </FieldContent>\n          <NativeSelect id=\"horizontal-native-select\">\n            <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-slider\">Volume</FieldLabel>\n            <FieldDescription>Adjust the volume level.</FieldDescription>\n          </FieldContent>\n          <Slider id=\"horizontal-slider\" defaultValue={[50]} max={100} />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/field.json b/apps/v4/public/r/styles/radix-maia/field.json
index 8301b07ccd..c66ef76181 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(\"gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\", className)}\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(\"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\", className)}\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        \"gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\"data-[invalid=true]:text-destructive gap-3 group/field flex w-full\", {\n  variants: {\n    orientation: {\n      vertical:\n        \"flex-col [&>*]:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      responsive:\n        \"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\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        \"gap-1 group/field-content flex flex-1 flex-col 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        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4 group/field-label peer/field-label flex w-fit leading-snug\",\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        \"gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\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-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\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(\"-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative\", className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\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-destructive text-sm font-normal\", 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(\"gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\", className)}\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(\"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\", className)}\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        \"gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\"data-[invalid=true]:text-destructive gap-3 group/field flex w-full\", {\n  variants: {\n    orientation: {\n      vertical:\n        \"flex-col *:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      responsive:\n        \"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\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        \"gap-1 group/field-content flex flex-1 flex-col 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        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4 group/field-label peer/field-label flex w-fit leading-snug\",\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        \"gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\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-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\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(\"-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative\", className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\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-destructive text-sm font-normal\", 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/input-group.json b/apps/v4/public/r/styles/radix-maia/input-group.json
index fc8e7a07b0..7f7d090b0c 100644
--- a/apps/v4/public/r/styles/radix-maia/input-group.json
+++ b/apps/v4/public/r/styles/radix-maia/input-group.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-maia/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-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport { Textarea } from \"@/registry/radix-maia/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        \"border-input bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-4xl border transition-colors has-data-[align=block-end]:rounded-2xl has-data-[align=block-start]:rounded-2xl has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[textarea]:rounded-xl 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-2 py-2 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-4xl **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-3 has-[>button]:ml-[-0.25rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\": \"pr-3 has-[>button]:mr-[-0.25rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-3 pt-3 group-has-[>input]/input-group:pt-3 [.border-b]:pb-3 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-3 pb-3 group-has-[>input]/input-group:pb-3 [.border-t]:pt-3 order-last w-full justify-start\",\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  \"gap-2 rounded-4xl text-sm shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 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        \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1\", className)}\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(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-maia/lib/utils\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport { Textarea } from \"@/registry/radix-maia/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        \"border-input bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-4xl border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-2xl has-data-[align=block-start]:rounded-2xl has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[textarea]:rounded-xl 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-2 py-2 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-4xl **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-3 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\": \"pr-3 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-3 pt-3 group-has-[>input]/input-group:pt-3 [.border-b]:pb-3 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-3 pb-3 group-has-[>input]/input-group:pb-3 [.border-t]:pt-3 order-last w-full justify-start\",\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  \"gap-2 rounded-4xl text-sm shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 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        \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1\", className)}\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(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/item.json b/apps/v4/public/r/styles/radix-maia/item.json
index f9372b0a2d..09fd28730c 100644
--- a/apps/v4/public/r/styles/radix-maia/item.json
+++ b/apps/v4/public/r/styles/radix-maia/item.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-maia/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-maia/lib/utils\"\nimport { Separator } from \"@/registry/radix-maia/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        \"gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2 group/item-group flex w-full flex-col\",\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  \"[a]:hover:bg-muted rounded-2xl border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\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 [[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  \"gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-10 overflow-hidden rounded-lg group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 group-data-[size=xs]/item:rounded-md [&_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        \"gap-1 group-data-[size=xs]/item:gap-0.5 flex flex-1 flex-col [&+[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        \"gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\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        \"text-muted-foreground text-left text-sm [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\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(\"gap-2 flex items-center\", 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        \"gap-2 flex basis-full items-center justify-between\",\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        \"gap-2 flex basis-full items-center justify-between\",\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",
+      "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-maia/lib/utils\"\nimport { Separator } from \"@/registry/radix-maia/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        \"gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col\",\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  \"[a]:hover:bg-muted rounded-2xl border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\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  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-10 overflow-hidden rounded-lg group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 group-data-[size=xs]/item:rounded-md [&_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        \"gap-1 group-data-[size=xs]/item:gap-0.5 flex flex-1 flex-col [&+[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        \"gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\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        \"text-muted-foreground text-left text-sm [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\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(\"gap-2 flex items-center\", 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        \"gap-2 flex basis-full items-center justify-between\",\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        \"gap-2 flex basis-full items-center justify-between\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/kbd.json b/apps/v4/public/r/styles/radix-maia/kbd.json
index 6c57932110..7320b93455 100644
--- a/apps/v4/public/r/styles/radix-maia/kbd.json
+++ b/apps/v4/public/r/styles/radix-maia/kbd.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/kbd.tsx",
-      "content": "import { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\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(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
+      "content": "import { cn } from \"@/registry/radix-maia/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\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(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/menubar-example.json b/apps/v4/public/r/styles/radix-maia/menubar-example.json
index 0bed388d69..400d8d7cb0 100644
--- a/apps/v4/public/r/styles/radix-maia/menubar-example.json
+++ b/apps/v4/public/r/styles/radix-maia/menubar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/menubar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/radix-maia/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    </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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/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-maia/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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/menubar.json b/apps/v4/public/r/styles/radix-maia/menubar.json
index 51779bba7f..17456675d6 100644
--- a/apps/v4/public/r/styles/radix-maia/menubar.json
+++ b/apps/v4/public/r/styles/radix-maia/menubar.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-maia/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-maia/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(\"bg-background h-9 rounded-2xl border p-1 flex items-center\", className)}\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        \"hover:bg-muted aria-expanded:bg-muted rounded-xl px-2.5 py-1 text-sm font-medium flex items-center outline-hidden select-none\",\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          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-3 pl-8 text-sm data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-3 pl-8 text-sm data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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(\"text-muted-foreground px-3.5 py-2.5 text-xs data-[inset]:pl-8\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-32 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/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(\"bg-background h-9 rounded-2xl border p-1 flex items-center\", className)}\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        \"hover:bg-muted aria-expanded:bg-muted rounded-xl px-2.5 py-1 text-sm font-medium flex items-center outline-hidden select-none\",\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          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-48 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm data-disabled:opacity-50 data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-3 pl-9.5 text-sm data-disabled:opacity-50 data-inset:pl-9.5 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-3 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-3 pl-9.5 text-sm data-disabled:opacity-50 data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-3 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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(\"text-muted-foreground px-3.5 py-2.5 text-xs data-inset:pl-9.5\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-32 rounded-2xl p-1 shadow-2xl ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/navigation-menu.json b/apps/v4/public/r/styles/radix-maia/navigation-menu.json
index 010f54efd5..2bf315d499 100644
--- a/apps/v4/public/r/styles/radix-maia/navigation-menu.json
+++ b/apps/v4/public/r/styles/radix-maia/navigation-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-maia/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-maia/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        \"max-w-max 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        \"gap-0 group flex flex-1 list-none items-center justify-center\",\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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\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-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-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        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/5 p-2.5 pr-3 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-2xl group-data-[viewport=false]/navigation-menu:shadow-2xl group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full 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 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\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          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/5 rounded-2xl shadow-2xl ring-1 duration-100 origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden md:w-[var(--radix-navigation-menu-viewport-width)]\",\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(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-xl p-3 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\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",
+      "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-maia/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        \"max-w-max 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        \"gap-0 group flex flex-1 list-none items-center justify-center\",\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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-2xl px-4.5 py-2.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\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-open/navigation-menu-trigger:rotate-180 group-data-popup-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        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/5 p-2.5 pr-3 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-2xl group-data-[viewport=false]/navigation-menu:shadow-2xl group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full 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 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\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          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/5 rounded-2xl shadow-2xl ring-1 duration-100 origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden md:w-(--radix-navigation-menu-viewport-width)\",\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(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-xl p-3 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/resizable.json b/apps/v4/public/r/styles/radix-maia/resizable.json
index 807e16f7f8..032dbd0235 100644
--- a/apps/v4/public/r/styles/radix-maia/resizable.json
+++ b/apps/v4/public/r/styles/radix-maia/resizable.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-maia/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-maia/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        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 ring-offset-background 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=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-maia/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        \"bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 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=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/select.json b/apps/v4/public/r/styles/radix-maia/select.json
index e18927793a..09941dc156 100644
--- a/apps/v4/public/r/styles/radix-maia/select.json
+++ b/apps/v4/public/r/styles/radix-maia/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-maia/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-maia/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 p-1\", 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        \"border-input data-[placeholder]:text-muted-foreground bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-4xl border px-3 py-2 text-sm transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"text-muted-foreground size-4 pointer-events-none\"\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          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-36 rounded-2xl shadow-2xl ring-1 duration-100 cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none\",\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-[var(--radix-select-trigger-height)] data-[position=popper]:w-full data-[position=popper]:min-w-[var(--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(\"text-muted-foreground px-3 py-2.5 text-xs\", className)}\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        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"bg-border/50 -mx-1 my-1 h-px pointer-events-none\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/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 p-1\", 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        \"border-input data-placeholder:text-muted-foreground bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-4xl border px-3 py-2 text-sm transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"text-muted-foreground size-4 pointer-events-none\"\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          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/5 min-w-36 rounded-2xl shadow-2xl ring-1 duration-100 cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none\",\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(\"text-muted-foreground px-3 py-2.5 text-xs\", className)}\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        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"bg-border/50 -mx-1 my-1 h-px pointer-events-none\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/separator.json b/apps/v4/public/r/styles/radix-maia/separator.json
index f2511ce4c9..d5a7423400 100644
--- a/apps/v4/public/r/styles/radix-maia/separator.json
+++ b/apps/v4/public/r/styles/radix-maia/separator.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-maia/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-maia/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        \"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/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        \"bg-border shrink-0 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/tabs.json b/apps/v4/public/r/styles/radix-maia/tabs.json
index b34a3b6a0f..3dcccab83f 100644
--- a/apps/v4/public/r/styles/radix-maia/tabs.json
+++ b/apps/v4/public/r/styles/radix-maia/tabs.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-maia/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-maia/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        \"gap-2 group/tabs flex data-[orientation=horizontal]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-4xl p-[3px] group-data-horizontal/tabs:h-9 group-data-vertical/tabs:rounded-2xl data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=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        \"gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium group-data-vertical/tabs:px-2.5 group-data-vertical/tabs:py-1.5 [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=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(\"text-sm flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
+      "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-maia/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        \"gap-2 group/tabs flex data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-4xl p-[3px] group-data-horizontal/tabs:h-9 group-data-vertical/tabs:rounded-2xl data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center 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        \"gap-1.5 rounded-xl border border-transparent px-2 py-1 text-sm font-medium group-data-vertical/tabs:px-2.5 group-data-vertical/tabs:py-1.5 [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute 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(\"text-sm flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/toggle-group.json b/apps/v4/public/r/styles/radix-maia/toggle-group.json
index 6cd69b2deb..0454147575 100644
--- a/apps/v4/public/r/styles/radix-maia/toggle-group.json
+++ b/apps/v4/public/r/styles/radix-maia/toggle-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-maia/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-maia/lib/utils\"\nimport { toggleVariants } from \"@/registry/radix-maia/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        \"data-[spacing=0]:data-[variant=outline]:rounded-4xl group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=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        \"data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-3 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-4xl group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-xl group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-4xl group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-xl shrink-0 focus:z-10 focus-visible:z-10 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",
+      "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-maia/lib/utils\"\nimport { toggleVariants } from \"@/registry/radix-maia/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        \"data-[spacing=0]:data-[variant=outline]:rounded-4xl group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] 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        \"data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-3 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-4xl group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-xl group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-4xl group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-xl shrink-0 focus:z-10 focus-visible:z-10 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/tooltip.json b/apps/v4/public/r/styles/radix-maia/tooltip.json
index cd3869f7a9..8a187e3139 100644
--- a/apps/v4/public/r/styles/radix-maia/tooltip.json
+++ b/apps/v4/public/r/styles/radix-maia/tooltip.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-maia/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-maia/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 (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\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          \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-2xl px-3 py-1.5 text-xs **:data-[slot=kbd]:rounded-4xl bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin)\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px] bg-foreground fill-foreground z-50 translate-y-[calc(-50%_-_2px)]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-maia/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 (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\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          \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-2xl px-3 py-1.5 text-xs **:data-[slot=kbd]:rounded-4xl bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin)\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px] bg-foreground fill-foreground z-50 translate-y-[calc(-50%_-_2px)]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/breadcrumb.json b/apps/v4/public/r/styles/radix-mira/breadcrumb.json
index 7d91437180..a34bca4a15 100644
--- a/apps/v4/public/r/styles/radix-mira/breadcrumb.json
+++ b/apps/v4/public/r/styles/radix-mira/breadcrumb.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/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        \"text-muted-foreground gap-1.5 text-xs/relaxed flex flex-wrap items-center break-words\",\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(\"gap-1 inline-flex items-center\", 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(\"hover:text-foreground transition-colors\", 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(\"text-foreground font-normal\", 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        \"size-4 [&>svg]:size-3.5 flex items-center justify-center\",\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",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/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        \"text-muted-foreground gap-1.5 text-xs/relaxed flex flex-wrap items-center wrap-break-word\",\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(\"gap-1 inline-flex items-center\", 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(\"hover:text-foreground transition-colors\", 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(\"text-foreground font-normal\", 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        \"size-4 [&>svg]:size-3.5 flex items-center justify-center\",\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"
     }
   ],
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 56d33c5cf9..29aad62737 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  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! 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        \"bg-muted gap-2 rounded-md border px-2.5 text-xs/relaxed font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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        \"bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=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  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! 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        \"bg-muted gap-2 rounded-md border px-2.5 text-xs/relaxed font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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        \"bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=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/button.json b/apps/v4/public/r/styles/radix-mira/button.json
index f1572dc605..2d56b3eaa7 100644
--- a/apps/v4/public/r/styles/radix-mira/button.json
+++ b/apps/v4/public/r/styles/radix-mira/button.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/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-mira/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium focus-visible:ring-[2px] aria-invalid:ring-[2px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline: \"border-border dark:bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost: \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive: \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        xs: \"h-5 gap-1 rounded-sm px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5\",\n        sm: \"h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        lg: \"h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4\",\n        icon: \"size-7 [&_svg:not([class*='size-'])]:size-3.5\",\n        \"icon-xs\": \"size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5\",\n        \"icon-sm\": \"size-6 [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-lg\": \"size-8 [&_svg:not([class*='size-'])]:size-4\",\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",
+      "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-mira/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium focus-visible:ring-2 aria-invalid:ring-2 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline: \"border-border dark:bg-input/30 hover:bg-input/50 hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost: \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive: \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-7 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        xs: \"h-5 gap-1 rounded-sm px-2 text-[0.625rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-2.5\",\n        sm: \"h-6 gap-1 px-2 text-xs/relaxed has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        lg: \"h-8 gap-1 px-2.5 text-xs/relaxed has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-4\",\n        icon: \"size-7 [&_svg:not([class*='size-'])]:size-3.5\",\n        \"icon-xs\": \"size-5 rounded-sm [&_svg:not([class*='size-'])]:size-2.5\",\n        \"icon-sm\": \"size-6 [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-lg\": \"size-8 [&_svg:not([class*='size-'])]:size-4\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/calendar-example.json b/apps/v4/public/r/styles/radix-mira/calendar-example.json
index 496ad84a70..d25b74eac9 100644
--- a/apps/v4/public/r/styles/radix-mira/calendar-example.json
+++ b/apps/v4/public/r/styles/radix-mira/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-mira/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-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/radix-mira/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-mira/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-mira/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-mira/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    </ExampleWrapper>\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=\"bg-card border-t\">\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",
+      "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-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/radix-mira/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-mira/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-mira/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-mira/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-mira/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=\"bg-card border-t\">\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/calendar.json b/apps/v4/public/r/styles/radix-mira/calendar.json
index c87f51d183..88d47e9f63 100644
--- a/apps/v4/public/r/styles/radix-mira/calendar.json
+++ b/apps/v4/public/r/styles/radix-mira/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/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-mira/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/radix-mira/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        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(6)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[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          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\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          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) 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        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground 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:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "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-mira/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/radix-mira/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        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(6)] bg-background group/calendar 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          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\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          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) 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        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground 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:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/chart.json b/apps/v4/public/r/styles/radix-mira/chart.json
index 5023333fdf..6bac6fd34e 100644
--- a/apps/v4/public/r/styles/radix-mira/chart.json
+++ b/apps/v4/public/r/styles/radix-mira/chart.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\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  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\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          \"[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.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          {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  }) {\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 as keyof typeof config]?.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        \"border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs/relaxed shadow-xl grid min-w-[8rem] items-start\",\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={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\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 && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\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  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\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) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\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\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\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  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\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          \"[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.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          {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  }) {\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 as keyof typeof config]?.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        \"border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs/relaxed shadow-xl grid min-w-32 items-start\",\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={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\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 && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\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  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\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) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\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\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/checkbox.json b/apps/v4/public/r/styles/radix-mira/checkbox.json
index 70498d086e..b634fc72fc 100644
--- a/apps/v4/public/r/styles/radix-mira/checkbox.json
+++ b/apps/v4/public/r/styles/radix-mira/checkbox.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/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-mira/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        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[2px] aria-invalid:ring-[2px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/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        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-2 aria-invalid:ring-2 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\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"
     }
   ],
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 548ad4d1f5..97a800c99f 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    </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\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=\"text-muted-foreground w-52 justify-between font-normal\"\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=\"text-muted-foreground w-52 justify-between font-normal\"\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/combobox.json b/apps/v4/public/r/styles/radix-mira/combobox.json
index b7209e0491..e5d00c2493 100644
--- a/apps/v4/public/r/styles/radix-mira/combobox.json
+++ b/apps/v4/public/r/styles/radix-mira/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/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-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-mira/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-3.5\", 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=\"text-muted-foreground size-3.5 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/20 dark:bg-popover max-h-72 min-w-32 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-7 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target 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) data-[chips=true]:min-w-(--anchor-width)\",\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 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex items-center justify-center\" />}\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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\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(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-xs/relaxed group-data-empty/combobox-content:flex\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"bg-input/20 dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/30 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-7 flex-wrap items-center gap-1 rounded-md border bg-clip-padding px-2 py-0.5 text-xs/relaxed transition-colors focus-within:ring-[2px] has-aria-invalid:ring-[2px] has-data-[slot=combobox-chip]:px-1\", className)}\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        \"bg-muted-foreground/10 text-foreground flex h-[calc(--spacing(4.75))] w-fit items-center justify-center gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1.5 text-xs/relaxed font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\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(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-mira/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-3.5\", 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=\"text-muted-foreground size-3.5 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/20 dark:bg-popover max-h-72 min-w-32 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-7 *:data-[slot=input-group]:border-none *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target 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) data-[chips=true]:min-w-(--anchor-width)\",\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 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex items-center justify-center\" />}\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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\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(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-xs/relaxed group-data-empty/combobox-content:flex\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"bg-input/20 dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/30 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-7 flex-wrap items-center gap-1 rounded-md border bg-clip-padding px-2 py-0.5 text-xs/relaxed transition-colors focus-within:ring-2 has-aria-invalid:ring-2 has-data-[slot=combobox-chip]:px-1\", className)}\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        \"bg-muted-foreground/10 text-foreground flex h-[calc(--spacing(4.75))] w-fit items-center justify-center gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1.5 text-xs/relaxed font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\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(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/command-example.json b/apps/v4/public/r/styles/radix-mira/command-example.json
index fa7476a7b0..de4c0d4d2e 100644
--- a/apps/v4/public/r/styles/radix-mira/command-example.json
+++ b/apps/v4/public/r/styles/radix-mira/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/radix-mira/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/radix-mira/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { Card, CardContent } from \"@/registry/radix-mira/ui/card\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/command.json b/apps/v4/public/r/styles/radix-mira/command.json
index 2f847b1430..ae296336a0 100644
--- a/apps/v4/public/r/styles/radix-mira/command.json
+++ b/apps/v4/public/r/styles/radix-mira/command.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/radix-mira/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        \"bg-popover text-popover-foreground rounded-xl p-1 flex size-full flex-col overflow-hidden\",\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(\n          \"rounded-xl! p-0 top-1/3 translate-y-0 overflow-hidden p-0\",\n          className\n        )}\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 pb-0\">\n      <InputGroup className=\"bg-input/20 dark:bg-input/30 h-8!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-xs/relaxed 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-3.5 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 outline-none overflow-x-hidden overflow-y-auto\",\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-xs/relaxed\", 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(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px\", 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        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-xs/relaxed outline-hidden select-none [&_svg:not([class*='size-'])]:size-3.5 [[data-slot=dialog-content]_&]:rounded-md group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-[0.625rem] tracking-widest\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/radix-mira/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        \"bg-popover text-popover-foreground rounded-xl p-1 flex size-full flex-col overflow-hidden\",\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(\n          \"rounded-xl! p-0 top-1/3 translate-y-0 overflow-hidden p-0\",\n          className\n        )}\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 pb-0\">\n      <InputGroup className=\"bg-input/20 dark:bg-input/30 h-8!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full text-xs/relaxed 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-3.5 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 outline-none overflow-x-hidden overflow-y-auto\",\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-xs/relaxed\", 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(\"text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2.5 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px\", 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        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-xs/relaxed outline-hidden select-none in-data-[slot=dialog-content]:rounded-md [&_svg:not([class*='size-'])]:size-3.5 group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-[0.625rem] tracking-widest\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/context-menu-example.json b/apps/v4/public/r/styles/radix-mira/context-menu-example.json
index 170f3789b6..f5f45f6d59 100644
--- a/apps/v4/public/r/styles/radix-mira/context-menu-example.json
+++ b/apps/v4/public/r/styles/radix-mira/context-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/context-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 { Button } from \"@/registry/radix-mira/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-mira/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/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    </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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\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-mira/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/context-menu.json b/apps/v4/public/r/styles/radix-mira/context-menu.json
index c9c69738f0..514a3558cb 100644
--- a/apps/v4/public/r/styles/radix-mira/context-menu.json
+++ b/apps/v4/public/r/styles/radix-mira/context-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/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-mira/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          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none 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 right-2 flex items-center justify-center pointer-events-none\">\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  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\">\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(\"text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/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          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none 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 right-2 flex items-center justify-center pointer-events-none\">\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\">\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(\"text-muted-foreground px-2 py-1.5 text-xs data-inset:pl-7.5\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest\", className)}\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"
     }
   ],
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 52b676aab2..1c39496e30 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    </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>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</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=\"text-muted-foreground truncate text-xs\">\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=\"text-muted-foreground ml-auto\"\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 DropdownMenuComplex() {\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=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\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({ ...notifications, email: checked === true })\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({ ...notifications, sms: checked === true })\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    </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>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</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=\"text-muted-foreground truncate text-xs\">\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=\"text-muted-foreground ml-auto\"\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 [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=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\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({ ...notifications, email: checked === true })\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({ ...notifications, sms: checked === true })\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    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/dropdown-menu.json b/apps/v4/public/r/styles/radix-mira/dropdown-menu.json
index 665a2b6dcf..677adc9d98 100644
--- a/apps/v4/public/r/styles/radix-mira/dropdown-menu.json
+++ b/apps/v4/public/r/styles/radix-mira/dropdown-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/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-mira/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          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none 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\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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(\"text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden\",\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/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          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none 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\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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(\"text-muted-foreground px-2 py-1.5 text-xs data-inset:pl-7.5\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-[0.625rem] tracking-widest\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/field-example.json b/apps/v4/public/r/styles/radix-mira/field-example.json
index 1698f3d1e3..dc5c909346 100644
--- a/apps/v4/public/r/styles/radix-mira/field-example.json
+++ b/apps/v4/public/r/styles/radix-mira/field-example.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/field-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-mira/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-mira/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-mira/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-mira/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport { Slider } from \"@/registry/radix-mira/ui/slider\"\nimport { Switch } from \"@/registry/radix-mira/ui/switch\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"us\">United States</SelectItem>\n              <SelectItem value=\"uk\">United Kingdom</SelectItem>\n              <SelectItem value=\"ca\">Canada</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"utc\">UTC</SelectItem>\n              <SelectItem value=\"est\">Eastern Time</SelectItem>\n              <SelectItem value=\"pst\">Pacific Time</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-mira/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-mira/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-mira/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-mira/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport { Slider } from \"@/registry/radix-mira/ui/slider\"\nimport { Switch } from \"@/registry/radix-mira/ui/switch\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"us\">United States</SelectItem>\n              <SelectItem value=\"uk\">United Kingdom</SelectItem>\n              <SelectItem value=\"ca\">Canada</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"utc\">UTC</SelectItem>\n              <SelectItem value=\"est\">Eastern Time</SelectItem>\n              <SelectItem value=\"pst\">Pacific Time</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction HorizontalFields() {\n  return (\n    <Example title=\"Horizontal Fields\">\n      <FieldGroup className=\"**:data-[slot=field-content]:min-w-48\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-input\">Username</FieldLabel>\n            <FieldDescription>Enter your preferred username.</FieldDescription>\n          </FieldContent>\n          <Input id=\"horizontal-input\" placeholder=\"johndoe\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-textarea\">Bio</FieldLabel>\n            <FieldDescription>\n              Write a short description about yourself.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"horizontal-textarea\"\n            placeholder=\"Tell us about yourself...\"\n          />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-switch\">\n              Email Notifications\n            </FieldLabel>\n            <FieldDescription>\n              Receive email updates about your account.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"horizontal-switch\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-select\">Favorite Fruit</FieldLabel>\n            <FieldDescription>Choose your favorite fruit.</FieldDescription>\n          </FieldContent>\n          <Select>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"orange\">Orange</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-native-select\">Country</FieldLabel>\n            <FieldDescription>Select your country.</FieldDescription>\n          </FieldContent>\n          <NativeSelect id=\"horizontal-native-select\">\n            <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-slider\">Volume</FieldLabel>\n            <FieldDescription>Adjust the volume level.</FieldDescription>\n          </FieldContent>\n          <Slider id=\"horizontal-slider\" defaultValue={[50]} max={100} />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/field.json b/apps/v4/public/r/styles/radix-mira/field.json
index 257eaee912..78354dbba1 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(\"gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\", className)}\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(\"mb-2 font-medium data-[variant=label]:text-xs/relaxed data-[variant=legend]:text-sm\", className)}\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        \"gap-4 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\"data-[invalid=true]:text-destructive gap-2 group/field flex w-full\", {\n  variants: {\n    orientation: {\n      vertical:\n        \"flex-col [&>*]:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      responsive:\n        \"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\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        \"gap-0.5 group/field-content flex flex-1 flex-col 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        \"has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2 group/field-label peer/field-label flex w-fit leading-snug\",\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        \"gap-2 text-xs/relaxed font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\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-muted-foreground text-left text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\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(\"-my-2 h-5 text-xs/relaxed group-data-[variant=outline]/field-group:-mb-2 relative\", className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\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-destructive text-xs/relaxed font-normal\", 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(\"gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\", className)}\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(\"mb-2 font-medium data-[variant=label]:text-xs/relaxed data-[variant=legend]:text-sm\", className)}\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        \"gap-4 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\"data-[invalid=true]:text-destructive gap-2 group/field flex w-full\", {\n  variants: {\n    orientation: {\n      vertical:\n        \"flex-col *:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      responsive:\n        \"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\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        \"gap-0.5 group/field-content flex flex-1 flex-col 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        \"has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-2 group/field-label peer/field-label flex w-fit leading-snug\",\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        \"gap-2 text-xs/relaxed font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\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-muted-foreground text-left text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\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(\"-my-2 h-5 text-xs/relaxed group-data-[variant=outline]/field-group:-mb-2 relative\", className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\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-destructive text-xs/relaxed font-normal\", 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/input-group.json b/apps/v4/public/r/styles/radix-mira/input-group.json
index 6e341174a9..1c9ae93e45 100644
--- a/apps/v4/public/r/styles/radix-mira/input-group.json
+++ b/apps/v4/public/r/styles/radix-mira/input-group.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-mira/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-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport { Textarea } from \"@/registry/radix-mira/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        \"border-input bg-input/20 dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-7 rounded-md border transition-colors has-data-[align=block-end]:rounded-md has-data-[align=block-start]:rounded-md has-[[data-slot=input-group-control]:focus-visible]:ring-[2px] has-[[data-slot][aria-invalid=true]]:ring-[2px] has-[textarea]:rounded-md 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-1 py-2 text-xs/relaxed font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-[calc(var(--radius-sm)-2px)] **:data-[slot=kbd]:px-1 **:data-[slot=kbd]:text-[0.625rem] [&>svg:not([class*='size-'])]:size-3.5 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.275rem] has-[>kbd]:ml-[-0.275rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.275rem] has-[>kbd]:mr-[-0.275rem] order-last\",\n        \"block-start\":\n          \"px-2 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\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  \"gap-2 rounded-md text-xs/relaxed shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-5 gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1 [&>svg:not([class*='size-'])]:size-3\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 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        \"text-muted-foreground gap-2 text-xs/relaxed [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1\", className)}\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(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport { Textarea } from \"@/registry/radix-mira/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        \"border-input bg-input/20 dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-7 rounded-md border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-md has-data-[align=block-start]:rounded-md has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot][aria-invalid=true]]:ring-2 has-[textarea]:rounded-md 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground **:data-[slot=kbd]:bg-muted-foreground/10 h-auto gap-1 py-2 text-xs/relaxed font-medium group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-[calc(var(--radius-sm)-2px)] **:data-[slot=kbd]:px-1 **:data-[slot=kbd]:text-[0.625rem] [&>svg:not([class*='size-'])]:size-3.5 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.275rem] has-[>kbd]:ml-[-0.275rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.275rem] has-[>kbd]:mr-[-0.275rem] order-last\",\n        \"block-start\":\n          \"px-2 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\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  \"gap-2 rounded-md text-xs/relaxed shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-5 gap-1 rounded-[calc(var(--radius-sm)-2px)] px-1 [&>svg:not([class*='size-'])]:size-3\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 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        \"text-muted-foreground gap-2 text-xs/relaxed [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1\", className)}\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(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/input-otp.json b/apps/v4/public/r/styles/radix-mira/input-otp.json
index 4ca1578a42..987706f728 100644
--- a/apps/v4/public/r/styles/radix-mira/input-otp.json
+++ b/apps/v4/public/r/styles/radix-mira/input-otp.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-mira/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-mira/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(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\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(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-[2px] flex items-center\", className)}\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        \"bg-input/20 dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/30 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-7 border-y border-r text-xs/relaxed transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-[2px] relative flex items-center justify-center data-[active=true]:z-10\",\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=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\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=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/radix-mira/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(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\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(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-2 flex items-center\", className)}\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        \"bg-input/20 dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/30 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-7 border-y border-r text-xs/relaxed transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-2 relative flex items-center justify-center data-[active=true]:z-10\",\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=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\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=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/input.json b/apps/v4/public/r/styles/radix-mira/input.json
index a9ad8d8c6a..7d6e641c36 100644
--- a/apps/v4/public/r/styles/radix-mira/input.json
+++ b/apps/v4/public/r/styles/radix-mira/input.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/input.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-mira/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        \"bg-input/20 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 rounded-md border px-2 py-0.5 text-sm transition-colors file:h-6 file:text-xs/relaxed file:font-medium focus-visible:ring-[2px] aria-invalid:ring-[2px] md:text-xs/relaxed file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-mira/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        \"bg-input/20 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 rounded-md border px-2 py-0.5 text-sm transition-colors file:h-6 file:text-xs/relaxed file:font-medium focus-visible:ring-2 aria-invalid:ring-2 md:text-xs/relaxed file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/item.json b/apps/v4/public/r/styles/radix-mira/item.json
index ebacea2bee..f5201560eb 100644
--- a/apps/v4/public/r/styles/radix-mira/item.json
+++ b/apps/v4/public/r/styles/radix-mira/item.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-mira/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-mira/lib/utils\"\nimport { Separator } from \"@/registry/radix-mira/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        \"gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2 group/item-group flex w-full flex-col\",\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  \"[a]:hover:bg-muted rounded-md border text-xs/relaxed w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2.5 px-2.5 py-2 [[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  \"gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-8 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_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        \"gap-1 group-data-[size=xs]/item:gap-0.5 flex flex-1 flex-col [&+[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        \"gap-2 text-xs/relaxed leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\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        \"text-muted-foreground text-left text-xs/relaxed [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\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(\"gap-2 flex items-center\", 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        \"gap-2 flex basis-full items-center justify-between\",\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        \"gap-2 flex basis-full items-center justify-between\",\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",
+      "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-mira/lib/utils\"\nimport { Separator } from \"@/registry/radix-mira/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        \"gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col\",\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  \"[a]:hover:bg-muted rounded-md border text-xs/relaxed w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2.5 px-2.5 py-2 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  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-8 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_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        \"gap-1 group-data-[size=xs]/item:gap-0.5 flex flex-1 flex-col [&+[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        \"gap-2 text-xs/relaxed leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\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        \"text-muted-foreground text-left text-xs/relaxed [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\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(\"gap-2 flex items-center\", 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        \"gap-2 flex basis-full items-center justify-between\",\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        \"gap-2 flex basis-full items-center justify-between\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/kbd.json b/apps/v4/public/r/styles/radix-mira/kbd.json
index 161c2e756a..0c6398dbe1 100644
--- a/apps/v4/public/r/styles/radix-mira/kbd.json
+++ b/apps/v4/public/r/styles/radix-mira/kbd.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/kbd.tsx",
-      "content": "import { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-xs px-1 font-sans text-[0.625rem] font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\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(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
+      "content": "import { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-xs px-1 font-sans text-[0.625rem] font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\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(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/menubar-example.json b/apps/v4/public/r/styles/radix-mira/menubar-example.json
index bb57e5dc6e..b1b6b9d1c1 100644
--- a/apps/v4/public/r/styles/radix-mira/menubar-example.json
+++ b/apps/v4/public/r/styles/radix-mira/menubar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/menubar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/radix-mira/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    </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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/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-mira/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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/menubar.json b/apps/v4/public/r/styles/radix-mira/menubar.json
index e871ab2d82..06fd485aed 100644
--- a/apps/v4/public/r/styles/radix-mira/menubar.json
+++ b/apps/v4/public/r/styles/radix-mira/menubar.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/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-mira/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(\"bg-background h-9 rounded-lg border p-1 flex items-center\", className)}\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        \"hover:bg-muted aria-expanded:bg-muted rounded-[calc(var(--radius-md)-2px)] px-2 py-[calc(--spacing(0.85))] text-xs/relaxed font-medium flex items-center outline-hidden select-none\",\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          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-3.5 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-8 text-xs data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-8 text-xs data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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(\"text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-[0.625rem] tracking-widest ml-auto\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-none select-none\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/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(\"bg-background h-9 rounded-lg border p-1 flex items-center\", className)}\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        \"hover:bg-muted aria-expanded:bg-muted rounded-[calc(var(--radius-md)-2px)] px-2 py-[calc(--spacing(0.85))] text-xs/relaxed font-medium flex items-center outline-hidden select-none\",\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          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-disabled:opacity-50 data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-7.5 text-xs data-disabled:opacity-50 data-inset:pl-7.5 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-7.5 text-xs data-disabled:opacity-50 data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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(\"text-muted-foreground px-2 py-1.5 text-xs data-inset:pl-7.5\", className)}\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(\"bg-border/50 -mx-1 my-1 h-px -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-[0.625rem] tracking-widest ml-auto\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5 flex cursor-default items-center outline-none select-none\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/native-select.json b/apps/v4/public/r/styles/radix-mira/native-select.json
index 6cc2e61837..3d925018e5 100644
--- a/apps/v4/public/r/styles/radix-mira/native-select.json
+++ b/apps/v4/public/r/styles/radix-mira/native-select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-mira/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=\"border-input bg-input/20 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 w-full min-w-0 appearance-none rounded-md border py-0.5 pr-6 pl-2 text-xs/relaxed transition-colors select-none focus-visible:ring-[2px] aria-invalid:ring-[2px] data-[size=sm]:h-6 data-[size=sm]:text-[0.625rem] outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground top-1/2 right-1.5 size-3.5 -translate-y-1/2 group-data-[size=sm]/native-select:size-3 group-data-[size=sm]/native-select:-translate-y-[calc(--spacing(1.25))] pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\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(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-mira/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=\"border-input bg-input/20 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 w-full min-w-0 appearance-none rounded-md border py-0.5 pr-6 pl-2 text-xs/relaxed transition-colors select-none focus-visible:ring-2 aria-invalid:ring-2 data-[size=sm]:h-6 data-[size=sm]:text-[0.625rem] outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground top-1/2 right-1.5 size-3.5 -translate-y-1/2 group-data-[size=sm]/native-select:size-3 group-data-[size=sm]/native-select:-translate-y-[calc(--spacing(1.25))] pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\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(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/navigation-menu.json b/apps/v4/public/r/styles/radix-mira/navigation-menu.json
index e6f9186243..9461d99f68 100644
--- a/apps/v4/public/r/styles/radix-mira/navigation-menu.json
+++ b/apps/v4/public/r/styles/radix-mira/navigation-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/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-mira/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        \"max-w-max 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        \"gap-0 group flex flex-1 list-none items-center justify-center\",\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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/30 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-2.5 py-1.5 text-xs/relaxed font-medium transition-all focus-visible:ring-[2px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\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-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-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        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1.5 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-xl group-data-[viewport=false]/navigation-menu:shadow-md group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full 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 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\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          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 rounded-xl shadow-md ring-1 duration-100 origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden md:w-[var(--radix-navigation-menu-viewport-width)]\",\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(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/30 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-lg p-2 text-xs/relaxed transition-all outline-none focus-visible:ring-[2px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\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",
+      "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-mira/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        \"max-w-max 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        \"gap-0 group flex flex-1 list-none items-center justify-center\",\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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/30 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-2.5 py-1.5 text-xs/relaxed font-medium transition-all focus-visible:ring-2 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\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-open/navigation-menu-trigger:rotate-180 group-data-popup-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        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1.5 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-xl group-data-[viewport=false]/navigation-menu:shadow-md group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full 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 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\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          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 rounded-xl shadow-md ring-1 duration-100 origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden md:w-(--radix-navigation-menu-viewport-width)\",\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(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/30 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-lg p-2 text-xs/relaxed transition-all outline-none focus-visible:ring-2 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/radio-group.json b/apps/v4/public/r/styles/radix-mira/radio-group.json
index a5338c117a..19c94fdb25 100644
--- a/apps/v4/public/r/styles/radix-mira/radio-group.json
+++ b/apps/v4/public/r/styles/radix-mira/radio-group.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/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-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\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 gap-3 w-full\", 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        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full transition-none focus-visible:ring-[2px] aria-invalid:ring-[2px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive flex size-4 items-center justify-center text-white\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          phosphor=\"CircleIcon\"\n          remixicon=\"RiCircleLine\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\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 gap-3 w-full\", 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        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full transition-none focus-visible:ring-2 aria-invalid:ring-2 group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive flex size-4 items-center justify-center text-white\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          phosphor=\"CircleIcon\"\n          remixicon=\"RiCircleLine\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/resizable.json b/apps/v4/public/r/styles/radix-mira/resizable.json
index 89114e7dcb..49224828aa 100644
--- a/apps/v4/public/r/styles/radix-mira/resizable.json
+++ b/apps/v4/public/r/styles/radix-mira/resizable.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-mira/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        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 ring-offset-background 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=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-mira/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        \"bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 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=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/select.json b/apps/v4/public/r/styles/radix-mira/select.json
index ea5c2abe95..82db818939 100644
--- a/apps/v4/public/r/styles/radix-mira/select.json
+++ b/apps/v4/public/r/styles/radix-mira/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/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-mira/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 p-1\", 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        \"border-input data-[placeholder]:text-muted-foreground bg-input/20 dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border px-2 py-1.5 text-xs/relaxed transition-colors focus-visible:ring-[2px] aria-invalid:ring-[2px] data-[size=default]:h-7 data-[size=sm]:h-6 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-3.5 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"text-muted-foreground size-3.5 pointer-events-none\"\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          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg shadow-md ring-1 duration-100 cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none\",\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-[var(--radix-select-trigger-height)] data-[position=popper]:w-full data-[position=popper]:min-w-[var(--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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\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        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex 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(\"bg-border/50 -mx-1 my-1 h-px pointer-events-none\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/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 p-1\", 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        \"border-input data-placeholder:text-muted-foreground bg-input/20 dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border px-2 py-1.5 text-xs/relaxed transition-colors focus-visible:ring-2 aria-invalid:ring-2 data-[size=default]:h-7 data-[size=sm]:h-6 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-3.5 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"text-muted-foreground size-3.5 pointer-events-none\"\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          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg shadow-md ring-1 duration-100 cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none\",\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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\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        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex 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(\"bg-border/50 -mx-1 my-1 h-px pointer-events-none\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/separator.json b/apps/v4/public/r/styles/radix-mira/separator.json
index cfcb00e674..c1ddcf4b13 100644
--- a/apps/v4/public/r/styles/radix-mira/separator.json
+++ b/apps/v4/public/r/styles/radix-mira/separator.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/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-mira/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        \"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/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        \"bg-border shrink-0 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/switch.json b/apps/v4/public/r/styles/radix-mira/switch.json
index cace9da085..89826fbdab 100644
--- a/apps/v4/public/r/styles/radix-mira/switch.json
+++ b/apps/v4/public/r/styles/radix-mira/switch.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/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-mira/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        \"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-[2px] aria-invalid:ring-[2px] data-[size=default]:h-[16.6px] data-[size=default]:w-[28px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 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=\"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/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        \"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-2 aria-invalid:ring-2 data-[size=default]:h-[16.6px] data-[size=default]:w-[28px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 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=\"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-3.5 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/tabs.json b/apps/v4/public/r/styles/radix-mira/tabs.json
index 3ea0d4bc9f..2f511a7a9f 100644
--- a/apps/v4/public/r/styles/radix-mira/tabs.json
+++ b/apps/v4/public/r/styles/radix-mira/tabs.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/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-mira/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        \"gap-2 group/tabs flex data-[orientation=horizontal]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=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        \"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-xs font-medium group-data-vertical/tabs:py-[calc(--spacing(1.25))] [&_svg:not([class*='size-'])]:size-3.5 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=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(\"text-xs/relaxed flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
+      "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-mira/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        \"gap-2 group/tabs flex data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center 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        \"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-xs font-medium group-data-vertical/tabs:py-[calc(--spacing(1.25))] [&_svg:not([class*='size-'])]:size-3.5 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute 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(\"text-xs/relaxed flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/textarea.json b/apps/v4/public/r/styles/radix-mira/textarea.json
index 4b18bd2cbe..c1c5d8ef9b 100644
--- a/apps/v4/public/r/styles/radix-mira/textarea.json
+++ b/apps/v4/public/r/styles/radix-mira/textarea.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/ui/textarea.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input bg-input/20 dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 resize-none rounded-md border px-2 py-2 text-sm transition-colors focus-visible:ring-[2px] aria-invalid:ring-[2px] md:text-xs/relaxed placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-mira/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input bg-input/20 dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 resize-none rounded-md border px-2 py-2 text-sm transition-colors focus-visible:ring-2 aria-invalid:ring-2 md:text-xs/relaxed placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/toggle-group.json b/apps/v4/public/r/styles/radix-mira/toggle-group.json
index 895329d4b4..c254bbd1df 100644
--- a/apps/v4/public/r/styles/radix-mira/toggle-group.json
+++ b/apps/v4/public/r/styles/radix-mira/toggle-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-mira/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-mira/lib/utils\"\nimport { toggleVariants } from \"@/registry/radix-mira/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        \"rounded-md data-[size=sm]:rounded-[min(var(--radius-md),8px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=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        \"group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md shrink-0 focus:z-10 focus-visible:z-10 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",
+      "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-mira/lib/utils\"\nimport { toggleVariants } from \"@/registry/radix-mira/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        \"rounded-md data-[size=sm]:rounded-[min(var(--radius-md),8px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] 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        \"group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md shrink-0 focus:z-10 focus-visible:z-10 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/tooltip.json b/apps/v4/public/r/styles/radix-mira/tooltip.json
index 88c245dc7a..f5ac30fd31 100644
--- a/apps/v4/public/r/styles/radix-mira/tooltip.json
+++ b/apps/v4/public/r/styles/radix-mira/tooltip.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-mira/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-mira/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 (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\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          \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs **:data-[slot=kbd]:rounded-md bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin)\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50 translate-y-[calc(-50%_-_2px)]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-mira/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 (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\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          \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs **:data-[slot=kbd]:rounded-md bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin)\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50 translate-y-[calc(-50%_-_2px)]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/accordion.json b/apps/v4/public/r/styles/radix-nova/accordion.json
index e4489cb7d5..78937399c7 100644
--- a/apps/v4/public/r/styles/radix-nova/accordion.json
+++ b/apps/v4/public/r/styles/radix-nova/accordion.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/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-nova/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          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\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=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-2.5 [&_a]:hover:text-foreground h-(--radix-accordion-content-height) [&_a]:underline [&_a]:underline-offset-3 [&_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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/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          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\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=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-2.5 [&_a]:hover:text-foreground h-(--radix-accordion-content-height) [&_a]:underline [&_a]:underline-offset-3 [&_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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/breadcrumb.json b/apps/v4/public/r/styles/radix-nova/breadcrumb.json
index 5d07574411..7fbae7918a 100644
--- a/apps/v4/public/r/styles/radix-nova/breadcrumb.json
+++ b/apps/v4/public/r/styles/radix-nova/breadcrumb.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/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        \"text-muted-foreground gap-1.5 text-sm flex flex-wrap items-center break-words\",\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(\"gap-1 inline-flex items-center\", 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(\"hover:text-foreground transition-colors\", 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(\"text-foreground font-normal\", 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        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\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",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/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        \"text-muted-foreground gap-1.5 text-sm flex flex-wrap items-center wrap-break-word\",\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(\"gap-1 inline-flex items-center\", 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(\"hover:text-foreground transition-colors\", 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(\"text-foreground font-normal\", 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        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\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"
     }
   ],
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 a80371467c..5e1aa97755 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  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! 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        \"bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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        \"bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=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  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-lg flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-lg! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-lg! 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        \"bg-muted gap-2 rounded-lg border px-2.5 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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        \"bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=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/button.json b/apps/v4/public/r/styles/radix-nova/button.json
index e574727591..396effcb69 100644
--- a/apps/v4/public/r/styles/radix-nova/button.json
+++ b/apps/v4/public/r/styles/radix-nova/button.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/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-nova/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        outline: \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost: \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive: \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-8\",\n        \"icon-xs\": \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg\",\n        \"icon-lg\": \"size-9\",\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",
+      "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-nova/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground [a]:hover:bg-primary/80\",\n        outline: \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost: \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive: \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5\",\n        lg: \"h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-8\",\n        \"icon-xs\": \"size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg\",\n        \"icon-lg\": \"size-9\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/calendar-example.json b/apps/v4/public/r/styles/radix-nova/calendar-example.json
index dd71735595..76aaa9fd7e 100644
--- a/apps/v4/public/r/styles/radix-nova/calendar-example.json
+++ b/apps/v4/public/r/styles/radix-nova/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-nova/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-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/radix-nova/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-nova/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-nova/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-nova/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    </ExampleWrapper>\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=\"bg-card border-t\">\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",
+      "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-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/radix-nova/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-nova/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-nova/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-nova/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-nova/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=\"bg-card border-t\">\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/calendar.json b/apps/v4/public/r/styles/radix-nova/calendar.json
index a46372a59b..2eed5f2ea2 100644
--- a/apps/v4/public/r/styles/radix-nova/calendar.json
+++ b/apps/v4/public/r/styles/radix-nova/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/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-nova/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/radix-nova/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        \"p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[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          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\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          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) 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        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground 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:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "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-nova/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/radix-nova/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        \"p-2 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(7)] bg-background group/calendar 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          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\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          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) 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        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground 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:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/chart.json b/apps/v4/public/r/styles/radix-nova/chart.json
index c186e66174..2bb3607a12 100644
--- a/apps/v4/public/r/styles/radix-nova/chart.json
+++ b/apps/v4/public/r/styles/radix-nova/chart.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\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  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\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          \"[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.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          {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  }) {\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 as keyof typeof config]?.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        \"border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl grid min-w-[8rem] items-start\",\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={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\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 && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\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  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\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) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\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\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\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  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\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          \"[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.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          {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  }) {\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 as keyof typeof config]?.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        \"border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl grid min-w-32 items-start\",\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={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\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 && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\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  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\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) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\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\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/checkbox.json b/apps/v4/public/r/styles/radix-nova/checkbox.json
index 168bfc0b11..6f061103ae 100644
--- a/apps/v4/public/r/styles/radix-nova/checkbox.json
+++ b/apps/v4/public/r/styles/radix-nova/checkbox.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/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-nova/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        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/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        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\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"
     }
   ],
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 da352b2a85..b15cff0208 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    </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\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=\"text-muted-foreground w-52 justify-between font-normal\"\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=\"text-muted-foreground w-52 justify-between font-normal\"\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/combobox.json b/apps/v4/public/r/styles/radix-nova/combobox.json
index 8290deb689..8458a4b8d5 100644
--- a/apps/v4/public/r/styles/radix-nova/combobox.json
+++ b/apps/v4/public/r/styles/radix-nova/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/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-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-nova/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=\"text-muted-foreground size-4 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target 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) data-[chips=true]:min-w-(--anchor-width)\",\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 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\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(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1\", className)}\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        \"bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\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(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-nova/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=\"text-muted-foreground size-4 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-lg shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target 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) data-[chips=true]:min-w-(--anchor-width)\",\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 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\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(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1\", className)}\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        \"bg-muted text-foreground flex h-[calc(--spacing(5.25))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\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(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/command-example.json b/apps/v4/public/r/styles/radix-nova/command-example.json
index a132cc16c4..f09252f8ac 100644
--- a/apps/v4/public/r/styles/radix-nova/command-example.json
+++ b/apps/v4/public/r/styles/radix-nova/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/radix-nova/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/radix-nova/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { Card, CardContent } from \"@/registry/radix-nova/ui/card\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/command.json b/apps/v4/public/r/styles/radix-nova/command.json
index 8c0613752f..dd6dfd2262 100644
--- a/apps/v4/public/r/styles/radix-nova/command.json
+++ b/apps/v4/public/r/styles/radix-nova/command.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/radix-nova/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        \"bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden\",\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(\n          \"rounded-xl! top-1/3 translate-y-0 overflow-hidden p-0\",\n          className\n        )}\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 pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full 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 outline-none overflow-x-hidden overflow-y-auto\",\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(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\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(\"bg-border -mx-1 h-px\", 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        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-lg! group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/radix-nova/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        \"bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden\",\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(\n          \"rounded-xl! top-1/3 translate-y-0 overflow-hidden p-0\",\n          className\n        )}\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 pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full 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 outline-none overflow-x-hidden overflow-y-auto\",\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(\"text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium\", className)}\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(\"bg-border -mx-1 h-px\", 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        \"data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! [&_svg:not([class*='size-'])]:size-4 group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/context-menu-example.json b/apps/v4/public/r/styles/radix-nova/context-menu-example.json
index b3c30e12ff..9c5fbfc091 100644
--- a/apps/v4/public/r/styles/radix-nova/context-menu-example.json
+++ b/apps/v4/public/r/styles/radix-nova/context-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/context-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 { Button } from \"@/registry/radix-nova/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-nova/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/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    </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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\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-nova/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/context-menu.json b/apps/v4/public/r/styles/radix-nova/context-menu.json
index 86c28c192b..b2b95f6370 100644
--- a/apps/v4/public/r/styles/radix-nova/context-menu.json
+++ b/apps/v4/public/r/styles/radix-nova/context-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/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-nova/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          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-lg border p-1 shadow-lg duration-100 cn-menu-target z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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=\"absolute right-2 pointer-events-none\">\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  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\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(\"text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:pl-8\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/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          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-lg border p-1 shadow-lg duration-100 cn-menu-target z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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=\"absolute right-2 pointer-events-none\">\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        \"focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\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(\"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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"
     }
   ],
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 3f4e4d5848..fd970d3b93 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    </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>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</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=\"text-muted-foreground truncate text-xs\">\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=\"text-muted-foreground ml-auto\"\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 DropdownMenuComplex() {\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=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\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({ ...notifications, email: checked === true })\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({ ...notifications, sms: checked === true })\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    </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>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</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=\"text-muted-foreground truncate text-xs\">\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=\"text-muted-foreground ml-auto\"\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 [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=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\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({ ...notifications, email: checked === true })\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({ ...notifications, sms: checked === true })\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    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/dropdown-menu.json b/apps/v4/public/r/styles/radix-nova/dropdown-menu.json
index 42a2ae23db..cadfd67fc4 100644
--- a/apps/v4/public/r/styles/radix-nova/dropdown-menu.json
+++ b/apps/v4/public/r/styles/radix-nova/dropdown-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/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-nova/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          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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(\"text-muted-foreground px-1.5 py-1 text-xs font-medium data-[inset]:pl-8\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 cn-menu-target z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden\",\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/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          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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(\"text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 cn-menu-target z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/field-example.json b/apps/v4/public/r/styles/radix-nova/field-example.json
index c5a1c0d2ef..1d82457bf4 100644
--- a/apps/v4/public/r/styles/radix-nova/field-example.json
+++ b/apps/v4/public/r/styles/radix-nova/field-example.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/field-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-nova/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-nova/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-nova/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-nova/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport { Slider } from \"@/registry/radix-nova/ui/slider\"\nimport { Switch } from \"@/registry/radix-nova/ui/switch\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"us\">United States</SelectItem>\n              <SelectItem value=\"uk\">United Kingdom</SelectItem>\n              <SelectItem value=\"ca\">Canada</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"utc\">UTC</SelectItem>\n              <SelectItem value=\"est\">Eastern Time</SelectItem>\n              <SelectItem value=\"pst\">Pacific Time</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-nova/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-nova/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-nova/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-nova/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport { Slider } from \"@/registry/radix-nova/ui/slider\"\nimport { Switch } from \"@/registry/radix-nova/ui/switch\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"us\">United States</SelectItem>\n              <SelectItem value=\"uk\">United Kingdom</SelectItem>\n              <SelectItem value=\"ca\">Canada</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"utc\">UTC</SelectItem>\n              <SelectItem value=\"est\">Eastern Time</SelectItem>\n              <SelectItem value=\"pst\">Pacific Time</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction HorizontalFields() {\n  return (\n    <Example title=\"Horizontal Fields\">\n      <FieldGroup className=\"**:data-[slot=field-content]:min-w-48\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-input\">Username</FieldLabel>\n            <FieldDescription>Enter your preferred username.</FieldDescription>\n          </FieldContent>\n          <Input id=\"horizontal-input\" placeholder=\"johndoe\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-textarea\">Bio</FieldLabel>\n            <FieldDescription>\n              Write a short description about yourself.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"horizontal-textarea\"\n            placeholder=\"Tell us about yourself...\"\n          />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-switch\">\n              Email Notifications\n            </FieldLabel>\n            <FieldDescription>\n              Receive email updates about your account.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"horizontal-switch\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-select\">Favorite Fruit</FieldLabel>\n            <FieldDescription>Choose your favorite fruit.</FieldDescription>\n          </FieldContent>\n          <Select>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"orange\">Orange</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-native-select\">Country</FieldLabel>\n            <FieldDescription>Select your country.</FieldDescription>\n          </FieldContent>\n          <NativeSelect id=\"horizontal-native-select\">\n            <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-slider\">Volume</FieldLabel>\n            <FieldDescription>Adjust the volume level.</FieldDescription>\n          </FieldContent>\n          <Slider id=\"horizontal-slider\" defaultValue={[50]} max={100} />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/field.json b/apps/v4/public/r/styles/radix-nova/field.json
index 646dd229f1..c66d7d5216 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(\"gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\", className)}\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(\"mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\", className)}\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        \"gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\"data-[invalid=true]:text-destructive gap-2 group/field flex w-full\", {\n  variants: {\n    orientation: {\n      vertical:\n        \"flex-col [&>*]:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      responsive:\n        \"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\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        \"gap-0.5 group/field-content flex flex-1 flex-col 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        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit leading-snug\",\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        \"gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\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-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\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(\"-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative\", className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\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-destructive text-sm font-normal\", 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(\"gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\", className)}\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(\"mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\", className)}\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        \"gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\"data-[invalid=true]:text-destructive gap-2 group/field flex w-full\", {\n  variants: {\n    orientation: {\n      vertical:\n        \"flex-col *:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      responsive:\n        \"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\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        \"gap-0.5 group/field-content flex flex-1 flex-col 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        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 group/field-label peer/field-label flex w-fit leading-snug\",\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        \"gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\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-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\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(\"-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative\", className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\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-destructive text-sm font-normal\", 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/input-group.json b/apps/v4/public/r/styles/radix-nova/input-group.json
index f08601de9a..c8ad96a0f9 100644
--- a/apps/v4/public/r/styles/radix-nova/input-group.json
+++ b/apps/v4/public/r/styles/radix-nova/input-group.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-nova/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-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport { Textarea } from \"@/registry/radix-nova/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        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\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  \"gap-2 text-sm shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-3px)] p-0 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        \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1\", className)}\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(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport { Textarea } from \"@/registry/radix-nova/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        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\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  \"gap-2 text-sm shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-3px)] p-0 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        \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1\", className)}\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(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/input-otp.json b/apps/v4/public/r/styles/radix-nova/input-otp.json
index 3b7ceca88a..1826a724de 100644
--- a/apps/v4/public/r/styles/radix-nova/input-otp.json
+++ b/apps/v4/public/r/styles/radix-nova/input-otp.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-nova/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-nova/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(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\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(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-lg has-aria-invalid:ring-[3px] flex items-center\", className)}\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        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10\",\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=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\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=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/radix-nova/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(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\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(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-lg has-aria-invalid:ring-3 flex items-center\", className)}\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        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:ring-3 relative flex items-center justify-center data-[active=true]:z-10\",\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=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\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=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/input.json b/apps/v4/public/r/styles/radix-nova/input.json
index d5bad26c27..2adbbe694a 100644
--- a/apps/v4/public/r/styles/radix-nova/input.json
+++ b/apps/v4/public/r/styles/radix-nova/input.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/input.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-nova/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        \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-nova/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        \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/item.json b/apps/v4/public/r/styles/radix-nova/item.json
index 00f7145a4c..9a34d26956 100644
--- a/apps/v4/public/r/styles/radix-nova/item.json
+++ b/apps/v4/public/r/styles/radix-nova/item.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-nova/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-nova/lib/utils\"\nimport { Separator } from \"@/registry/radix-nova/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        \"gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2 group/item-group flex w-full flex-col\",\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  \"[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 [[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  \"gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_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        \"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[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        \"gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\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        \"text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\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(\"gap-2 flex items-center\", 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        \"gap-2 flex basis-full items-center justify-between\",\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        \"gap-2 flex basis-full items-center justify-between\",\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",
+      "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-nova/lib/utils\"\nimport { Separator } from \"@/registry/radix-nova/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        \"gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col\",\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  \"[a]:hover:bg-muted rounded-lg border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-2.5 px-3 py-2.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 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  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_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        \"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[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        \"gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\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        \"text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\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(\"gap-2 flex items-center\", 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        \"gap-2 flex basis-full items-center justify-between\",\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        \"gap-2 flex basis-full items-center justify-between\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/kbd.json b/apps/v4/public/r/styles/radix-nova/kbd.json
index bb402f756e..968fe6f6e1 100644
--- a/apps/v4/public/r/styles/radix-nova/kbd.json
+++ b/apps/v4/public/r/styles/radix-nova/kbd.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/kbd.tsx",
-      "content": "import { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\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(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
+      "content": "import { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\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(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/menubar-example.json b/apps/v4/public/r/styles/radix-nova/menubar-example.json
index 76e0ca4dfb..0f04a705d9 100644
--- a/apps/v4/public/r/styles/radix-nova/menubar-example.json
+++ b/apps/v4/public/r/styles/radix-nova/menubar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/menubar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/radix-nova/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    </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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/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-nova/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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/menubar.json b/apps/v4/public/r/styles/radix-nova/menubar.json
index aa04c0c71e..30bf511815 100644
--- a/apps/v4/public/r/styles/radix-nova/menubar.json
+++ b/apps/v4/public/r/styles/radix-nova/menubar.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/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-nova/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(\"bg-background h-8 gap-0.5 rounded-lg border p-[3px] flex items-center\", className)}\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        \"hover:bg-muted aria-expanded:bg-muted rounded-sm px-1.5 py-[2px] text-sm font-medium flex items-center outline-hidden select-none\",\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          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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(\"px-1.5 py-1 text-sm font-medium data-[inset]:pl-8\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/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(\"bg-background h-8 gap-0.5 rounded-lg border p-[3px] flex items-center\", className)}\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        \"hover:bg-muted aria-expanded:bg-muted rounded-sm px-1.5 py-[2px] text-sm font-medium flex items-center outline-hidden select-none\",\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          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 data-inset:pl-7 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-1.5 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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(\"px-1.5 py-1 text-sm font-medium data-inset:pl-7\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-lg p-1 shadow-lg ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/native-select.json b/apps/v4/public/r/styles/radix-nova/native-select.json
index 4bcc6abe74..f9c31022ec 100644
--- a/apps/v4/public/r/styles/radix-nova/native-select.json
+++ b/apps/v4/public/r/styles/radix-nova/native-select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-nova/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=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\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(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-nova/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=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\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(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/navigation-menu.json b/apps/v4/public/r/styles/radix-nova/navigation-menu.json
index 986dac80be..4ff666274c 100644
--- a/apps/v4/public/r/styles/radix-nova/navigation-menu.json
+++ b/apps/v4/public/r/styles/radix-nova/navigation-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/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-nova/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        \"max-w-max 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        \"gap-0 group flex flex-1 list-none items-center justify-center\",\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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\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-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-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        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full 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 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\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          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 rounded-lg shadow ring-1 duration-100 origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden md:w-[var(--radix-navigation-menu-viewport-width)]\",\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(\"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 [[data-slot=navigation-menu-content]_&]:rounded-md\", className)}\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\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",
+      "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-nova/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        \"max-w-max 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        \"gap-0 group flex flex-1 list-none items-center justify-center\",\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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\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-open/navigation-menu-trigger:rotate-180 group-data-popup-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        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-1 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-lg group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full 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 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\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          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 rounded-lg shadow ring-1 duration-100 origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden md:w-(--radix-navigation-menu-viewport-width)\",\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(\"data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4\", className)}\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/radio-group.json b/apps/v4/public/r/styles/radix-nova/radio-group.json
index 6869fb03f1..7eb58278e0 100644
--- a/apps/v4/public/r/styles/radix-nova/radio-group.json
+++ b/apps/v4/public/r/styles/radix-nova/radio-group.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/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-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\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 gap-2 w-full\", 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        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          phosphor=\"CircleIcon\"\n          remixicon=\"RiCircleLine\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\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 gap-2 w-full\", 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        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-3 aria-invalid:ring-3 group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          phosphor=\"CircleIcon\"\n          remixicon=\"RiCircleLine\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/resizable.json b/apps/v4/public/r/styles/radix-nova/resizable.json
index 642a9b7537..4359ab7b93 100644
--- a/apps/v4/public/r/styles/radix-nova/resizable.json
+++ b/apps/v4/public/r/styles/radix-nova/resizable.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-nova/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        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 ring-offset-background 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=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-nova/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        \"bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 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=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/select.json b/apps/v4/public/r/styles/radix-nova/select.json
index 1c1e73c783..8166f96625 100644
--- a/apps/v4/public/r/styles/radix-nova/select.json
+++ b/apps/v4/public/r/styles/radix-nova/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/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-nova/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 p-1\", 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        \"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"text-muted-foreground size-4 pointer-events-none\"\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          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none\",\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-[var(--radix-select-trigger-height)] data-[position=popper]:w-full data-[position=popper]:min-w-[var(--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(\"text-muted-foreground px-1.5 py-1 text-xs\", className)}\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        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"bg-border -mx-1 my-1 h-px pointer-events-none\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/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 p-1\", 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        \"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"text-muted-foreground size-4 pointer-events-none\"\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          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none\",\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(\"text-muted-foreground px-1.5 py-1 text-xs\", className)}\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        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"bg-border -mx-1 my-1 h-px pointer-events-none\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/separator.json b/apps/v4/public/r/styles/radix-nova/separator.json
index 57c2476298..583a93f826 100644
--- a/apps/v4/public/r/styles/radix-nova/separator.json
+++ b/apps/v4/public/r/styles/radix-nova/separator.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/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-nova/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        \"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/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        \"bg-border shrink-0 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/slider.json b/apps/v4/public/r/styles/radix-nova/slider.json
index 37de746a97..f2f6842e89 100644
--- a/apps/v4/public/r/styles/radix-nova/slider.json
+++ b/apps/v4/public/r/styles/radix-nova/slider.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/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-nova/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        \"data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className=\"bg-muted rounded-full data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1 bg-muted relative grow overflow-hidden data-horizontal:w-full data-vertical:h-full\"\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className=\"bg-primary absolute 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=\"border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow] after:absolute after:-inset-2 hover:ring-[3px] focus-visible:ring-[3px] focus-visible:outline-hidden active:ring-[3px] block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Slider as SliderPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/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        \"data-vertical:min-h-40 relative flex w-full touch-none items-center select-none data-disabled:opacity-50 data-vertical:h-full data-vertical:w-auto data-vertical:flex-col\",\n        className\n      )}\n      {...props}\n    >\n      <SliderPrimitive.Track\n        data-slot=\"slider-track\"\n        className=\"bg-muted rounded-full data-horizontal:h-1 data-horizontal:w-full data-vertical:h-full data-vertical:w-1 bg-muted relative grow overflow-hidden data-horizontal:w-full data-vertical:h-full\"\n      >\n        <SliderPrimitive.Range\n          data-slot=\"slider-range\"\n          className=\"bg-primary absolute 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=\"border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow] after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3 block shrink-0 select-none disabled:pointer-events-none disabled:opacity-50\"\n        />\n      ))}\n    </SliderPrimitive.Root>\n  )\n}\n\nexport { Slider }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/switch.json b/apps/v4/public/r/styles/radix-nova/switch.json
index 57a0aaa76b..06ea7eb671 100644
--- a/apps/v4/public/r/styles/radix-nova/switch.json
+++ b/apps/v4/public/r/styles/radix-nova/switch.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/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-nova/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        \"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 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=\"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/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        \"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 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=\"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/tabs.json b/apps/v4/public/r/styles/radix-nova/tabs.json
index ba378482de..e34d0a9b24 100644
--- a/apps/v4/public/r/styles/radix-nova/tabs.json
+++ b/apps/v4/public/r/styles/radix-nova/tabs.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/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-nova/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        \"gap-2 group/tabs flex data-[orientation=horizontal]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=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        \"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=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(\"text-sm flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
+      "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-nova/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        \"gap-2 group/tabs flex data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center 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        \"gap-1.5 rounded-md border border-transparent px-1.5 py-0.5 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute 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(\"text-sm flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/textarea.json b/apps/v4/public/r/styles/radix-nova/textarea.json
index 67d66cfc23..892ec529a2 100644
--- a/apps/v4/public/r/styles/radix-nova/textarea.json
+++ b/apps/v4/public/r/styles/radix-nova/textarea.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/ui/textarea.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-nova/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/toggle-group.json b/apps/v4/public/r/styles/radix-nova/toggle-group.json
index 7011715abf..ac3ed5b080 100644
--- a/apps/v4/public/r/styles/radix-nova/toggle-group.json
+++ b/apps/v4/public/r/styles/radix-nova/toggle-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-nova/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-nova/lib/utils\"\nimport { toggleVariants } from \"@/registry/radix-nova/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        \"rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=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        \"group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg shrink-0 focus:z-10 focus-visible:z-10 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",
+      "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-nova/lib/utils\"\nimport { toggleVariants } from \"@/registry/radix-nova/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        \"rounded-lg data-[size=sm]:rounded-[min(var(--radius-md),10px)] group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] 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        \"group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-lg group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-lg group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-lg group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-lg shrink-0 focus:z-10 focus-visible:z-10 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/tooltip.json b/apps/v4/public/r/styles/radix-nova/tooltip.json
index 2b20b6304b..d2b458b1b6 100644
--- a/apps/v4/public/r/styles/radix-nova/tooltip.json
+++ b/apps/v4/public/r/styles/radix-nova/tooltip.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-nova/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-nova/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 (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\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          \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin)\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50 translate-y-[calc(-50%_-_2px)]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-nova/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 (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\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          \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin)\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50 translate-y-[calc(-50%_-_2px)]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/accordion.json b/apps/v4/public/r/styles/radix-vega/accordion.json
index 662320d966..b7806bce3d 100644
--- a/apps/v4/public/r/styles/radix-vega/accordion.json
+++ b/apps/v4/public/r/styles/radix-vega/accordion.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/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-vega/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          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\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=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-4 [&_a]:hover:text-foreground h-(--radix-accordion-content-height) [&_a]:underline [&_a]:underline-offset-3 [&_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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/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          \"focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 group/accordion-trigger relative flex flex-1 items-start justify-between border border-transparent transition-all outline-none disabled:pointer-events-none disabled:opacity-50\",\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=\"data-open:animate-accordion-down data-closed:animate-accordion-up text-sm overflow-hidden\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"pt-0 pb-4 [&_a]:hover:text-foreground h-(--radix-accordion-content-height) [&_a]:underline [&_a]:underline-offset-3 [&_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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/breadcrumb.json b/apps/v4/public/r/styles/radix-vega/breadcrumb.json
index 5c93c64ca9..107aaeeb02 100644
--- a/apps/v4/public/r/styles/radix-vega/breadcrumb.json
+++ b/apps/v4/public/r/styles/radix-vega/breadcrumb.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/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        \"text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center break-words\",\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(\"gap-1.5 inline-flex items-center\", 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(\"hover:text-foreground transition-colors\", 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(\"text-foreground font-normal\", 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        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\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",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/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        \"text-muted-foreground gap-1.5 text-sm sm:gap-2.5 flex flex-wrap items-center wrap-break-word\",\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(\"gap-1.5 inline-flex items-center\", 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(\"hover:text-foreground transition-colors\", 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(\"text-foreground font-normal\", 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        \"size-5 [&>svg]:size-4 flex items-center justify-center\",\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"
     }
   ],
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 8e022bcab1..3940a4c2ff 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  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! 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        \"bg-muted gap-2 rounded-md border px-2.5 text-sm font-medium shadow-xs [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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        \"bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=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  \"has-[>[data-slot=button-group]]:gap-2 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md flex w-fit items-stretch *:focus-visible:z-10 *:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-r-md! [&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none\",\n        vertical:\n          \"[&>[data-slot]:not(:has(~[data-slot]))]:rounded-b-md! 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        \"bg-muted gap-2 rounded-md border px-2.5 text-sm font-medium shadow-xs [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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        \"bg-input relative self-stretch data-[orientation=horizontal]:mx-px data-[orientation=horizontal]:w-auto data-[orientation=vertical]:my-px data-[orientation=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/button.json b/apps/v4/public/r/styles/radix-vega/button.json
index 70fb12b05c..52d36f2e46 100644
--- a/apps/v4/public/r/styles/radix-vega/button.json
+++ b/apps/v4/public/r/styles/radix-vega/button.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/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-vega/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline: \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost: \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive: \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-9\",\n        \"icon-xs\": \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\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",
+      "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-vega/lib/utils\"\n\nconst buttonVariants = cva(\n  \"focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline: \"border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground shadow-xs\",\n        secondary: \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost: \"hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground\",\n        destructive: \"bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        icon: \"size-9\",\n        \"icon-xs\": \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/calendar-example.json b/apps/v4/public/r/styles/radix-vega/calendar-example.json
index 9a784e4df0..043801c2a3 100644
--- a/apps/v4/public/r/styles/radix-vega/calendar-example.json
+++ b/apps/v4/public/r/styles/radix-vega/calendar-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-vega/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-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/radix-vega/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-vega/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-vega/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-vega/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    </ExampleWrapper>\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=\"bg-card border-t\">\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",
+      "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-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Calendar, CalendarDayButton } from \"@/registry/radix-vega/ui/calendar\"\nimport { Card, CardContent, CardFooter } from \"@/registry/radix-vega/ui/card\"\nimport { Field, FieldGroup, FieldLabel } from \"@/registry/radix-vega/ui/field\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupInput,\n} from \"@/registry/radix-vega/ui/input-group\"\nimport {\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n} from \"@/registry/radix-vega/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=\"bg-card border-t\">\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/calendar.json b/apps/v4/public/r/styles/radix-vega/calendar.json
index 54c6500004..0476963657 100644
--- a/apps/v4/public/r/styles/radix-vega/calendar.json
+++ b/apps/v4/public/r/styles/radix-vega/calendar.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/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-vega/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/radix-vega/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        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] bg-background group/calendar [[data-slot=card-content]_&]:bg-transparent [[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          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\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          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 -z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 -z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) 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        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground 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:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>span]:text-xs [&>span]:opacity-70\",\n        defaultClassNames.day,\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Calendar, CalendarDayButton }\n",
+      "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-vega/lib/utils\"\nimport { Button, buttonVariants } from \"@/registry/radix-vega/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        \"p-3 [--cell-radius:var(--radius-md)] [--cell-size:--spacing(8)] bg-background group/calendar 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          \"flex gap-4 flex-col md:flex-row relative\",\n          defaultClassNames.months\n        ),\n        month: cn(\"flex flex-col w-full gap-4\", defaultClassNames.month),\n        nav: cn(\n          \"flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between\",\n          defaultClassNames.nav\n        ),\n        button_previous: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_previous\n        ),\n        button_next: cn(\n          buttonVariants({ variant: buttonVariant }),\n          \"size-(--cell-size) aria-disabled:opacity-50 p-0 select-none\",\n          defaultClassNames.button_next\n        ),\n        month_caption: cn(\n          \"flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)\",\n          defaultClassNames.month_caption\n        ),\n        dropdowns: cn(\n          \"w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5\",\n          defaultClassNames.dropdowns\n        ),\n        dropdown_root: cn(\n          \"relative cn-calendar-dropdown-root rounded-(--cell-radius)\",\n          defaultClassNames.dropdown_root\n        ),\n        dropdown: cn(\n          \"absolute bg-popover inset-0 opacity-0\",\n          defaultClassNames.dropdown\n        ),\n        caption_label: cn(\n          \"select-none font-medium\",\n          captionLayout === \"label\"\n            ? \"text-sm\"\n            : \"cn-calendar-caption-label rounded-(--cell-radius) flex items-center gap-1 text-sm  [&>svg]:text-muted-foreground [&>svg]:size-3.5\",\n          defaultClassNames.caption_label\n        ),\n        table: \"w-full border-collapse\",\n        weekdays: cn(\"flex\", defaultClassNames.weekdays),\n        weekday: cn(\n          \"text-muted-foreground rounded-(--cell-radius) flex-1 font-normal text-[0.8rem] select-none\",\n          defaultClassNames.weekday\n        ),\n        week: cn(\"flex w-full mt-2\", defaultClassNames.week),\n        week_number_header: cn(\n          \"select-none w-(--cell-size)\",\n          defaultClassNames.week_number_header\n        ),\n        week_number: cn(\n          \"text-[0.8rem] select-none text-muted-foreground\",\n          defaultClassNames.week_number\n        ),\n        day: cn(\n          \"relative w-full rounded-(--cell-radius) h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius) group/day aspect-square select-none\",\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          \"rounded-l-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:right-0 z-0 isolate\",\n          defaultClassNames.range_start\n        ),\n        range_middle: cn(\"rounded-none\", defaultClassNames.range_middle),\n        range_end: cn(\n          \"rounded-r-(--cell-radius) bg-muted relative after:bg-muted after:absolute after:inset-y-0 after:w-4 after:left-0 z-0 isolate\",\n          defaultClassNames.range_end\n        ),\n        today: cn(\n          \"bg-muted text-foreground rounded-(--cell-radius) 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        \"data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-foreground 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:ring-[3px] data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) [&>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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/chart.json b/apps/v4/public/r/styles/radix-vega/chart.json
index 9fc1b86f5b..7401d9e93a 100644
--- a/apps/v4/public/r/styles/radix-vega/chart.json
+++ b/apps/v4/public/r/styles/radix-vega/chart.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/chart.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\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  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\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          \"[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.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          {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  }) {\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 as keyof typeof config]?.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        \"border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl grid min-w-[8rem] items-start\",\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={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\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 && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\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  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\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) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\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\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as RechartsPrimitive from \"recharts\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\n// Format: { THEME_NAME: CSS_SELECTOR }\nconst THEMES = { light: \"\", dark: \".dark\" } as const\n\nexport type ChartConfig = {\n  [k in string]: {\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  ...props\n}: React.ComponentProps<\"div\"> & {\n  config: ChartConfig\n  children: React.ComponentProps<\n    typeof RechartsPrimitive.ResponsiveContainer\n  >[\"children\"]\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          \"[&_.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-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 flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.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          {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  }) {\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 as keyof typeof config]?.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        \"border-border/50 bg-background gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl grid min-w-32 items-start\",\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={item.dataKey}\n                className={cn(\n                  \"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5\",\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 && (\n                        <span className=\"text-foreground font-mono font-medium tabular-nums\">\n                          {item.value.toLocaleString()}\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  Pick<RechartsPrimitive.LegendProps, \"payload\" | \"verticalAlign\"> & {\n    hideIcon?: boolean\n    nameKey?: string\n  }) {\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) => {\n          const key = `${nameKey || item.dataKey || \"value\"}`\n          const itemConfig = getPayloadConfigFromPayload(config, item, key)\n\n          return (\n            <div\n              key={item.value}\n              className={cn(\n                \"[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3\"\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\n    ? config[configLabelKey]\n    : config[key as keyof typeof config]\n}\n\nexport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  ChartLegend,\n  ChartLegendContent,\n  ChartStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/checkbox.json b/apps/v4/public/r/styles/radix-vega/checkbox.json
index 9e3b460013..a6cd05fcc3 100644
--- a/apps/v4/public/r/styles/radix-vega/checkbox.json
+++ b/apps/v4/public/r/styles/radix-vega/checkbox.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/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-vega/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        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border shadow-xs transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/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        \"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border shadow-xs transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3 peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"[&>svg]:size-3.5 grid place-content-center text-current transition-none\"\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"
     }
   ],
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 0d21be23cb..cbac53ce94 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    </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\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=\"text-muted-foreground w-52 justify-between font-normal\"\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=\"text-muted-foreground w-52 justify-between font-normal\"\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/combobox.json b/apps/v4/public/r/styles/radix-vega/combobox.json
index 9211ff666f..d6966f23a5 100644
--- a/apps/v4/public/r/styles/radix-vega/combobox.json
+++ b/apps/v4/public/r/styles/radix-vega/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/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-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-vega/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=\"text-muted-foreground size-4 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-md shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target 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) data-[chips=true]:min-w-(--anchor-width)\",\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 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\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(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5\", className)}\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        \"bg-muted text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\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(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-vega/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=\"text-muted-foreground size-4 pointer-events-none\"\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            \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 *:data-[slot=input-group]:bg-input/30 *:data-[slot=input-group]:border-input/30 max-h-72 min-w-36 overflow-hidden rounded-md shadow-md ring-1 duration-100 *:data-[slot=input-group]:m-1 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:shadow-none data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-target 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) data-[chips=true]:min-w-(--anchor-width)\",\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 overflow-y-auto p-1 data-empty:p-0 overflow-y-auto overscroll-contain\",\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        \"data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={<span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />}\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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\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(\"text-muted-foreground hidden w-full justify-center py-2 text-center text-sm group-data-empty/combobox-content:flex\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1.5\", className)}\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        \"bg-muted text-foreground flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-sm px-1.5 text-xs font-medium whitespace-nowrap has-data-[slot=combobox-chip-remove]:pr-0 has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50\",\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(\n        \"min-w-16 flex-1 outline-none\",\n        className\n      )}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/command-example.json b/apps/v4/public/r/styles/radix-vega/command-example.json
index cbd57029d7..75661db844 100644
--- a/apps/v4/public/r/styles/radix-vega/command-example.json
+++ b/apps/v4/public/r/styles/radix-vega/command-example.json
@@ -10,7 +10,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/command-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/radix-vega/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Command,\n  CommandDialog,\n  CommandEmpty,\n  CommandGroup,\n  CommandInput,\n  CommandItem,\n  CommandList,\n  CommandSeparator,\n  CommandShortcut,\n} from \"@/registry/radix-vega/ui/command\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\nimport { Card, CardContent } from \"@/registry/radix-vega/ui/card\"\n\nexport default function CommandExample() {\n  return (\n    <ExampleWrapper>\n      <CommandInline />\n      <CommandBasic />\n      <CommandWithShortcuts />\n      <CommandWithGroups />\n      <CommandManyItems />\n    </ExampleWrapper>\n  )\n}\n\nfunction CommandInline() {\n  return (\n    <Example title=\"Inline\">\n      <Card className=\"p-0\">\n        <CardContent className=\"p-0\">\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CardContent>\n      </Card>\n    </Example>\n  )\n}\n\nfunction CommandBasic() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Basic\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>Calendar</CommandItem>\n                <CommandItem>Search Emoji</CommandItem>\n                <CommandItem>Calculator</CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithShortcuts() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Shortcuts\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandWithGroups() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"With Groups\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Suggestions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SmileIcon\"\n                    tabler=\"IconMoodSmile\"\n                    hugeicons=\"SmileIcon\"\n                    phosphor=\"SmileyIcon\"\n                    remixicon=\"RiEmotionLine\"\n                  />\n                  <span>Search Emoji</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Settings\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n\nfunction CommandManyItems() {\n  const [open, setOpen] = React.useState(false)\n\n  return (\n    <Example title=\"Many Groups & Items\">\n      <div className=\"flex flex-col gap-4\">\n        <Button\n          onClick={() => setOpen(true)}\n          variant=\"outline\"\n          className=\"w-fit\"\n        >\n          Open Menu\n        </Button>\n        <CommandDialog open={open} onOpenChange={setOpen}>\n          <Command>\n            <CommandInput placeholder=\"Type a command or search...\" />\n            <CommandList>\n              <CommandEmpty>No results found.</CommandEmpty>\n              <CommandGroup heading=\"Navigation\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HomeIcon\"\n                    tabler=\"IconHome\"\n                    hugeicons=\"HomeIcon\"\n                    phosphor=\"HouseIcon\"\n                    remixicon=\"RiHomeLine\"\n                  />\n                  <span>Home</span>\n                  <CommandShortcut>⌘H</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"InboxIcon\"\n                    tabler=\"IconInbox\"\n                    hugeicons=\"InboxIcon\"\n                    phosphor=\"TrayIcon\"\n                    remixicon=\"RiInboxLine\"\n                  />\n                  <span>Inbox</span>\n                  <CommandShortcut>⌘I</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FileTextIcon\"\n                    tabler=\"IconFileText\"\n                    hugeicons=\"File02Icon\"\n                    phosphor=\"FileTextIcon\"\n                    remixicon=\"RiFileTextLine\"\n                  />\n                  <span>Documents</span>\n                  <CommandShortcut>⌘D</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderIcon\"\n                    tabler=\"IconFolder\"\n                    hugeicons=\"FolderIcon\"\n                    phosphor=\"FolderIcon\"\n                    remixicon=\"RiFolderLine\"\n                  />\n                  <span>Folders</span>\n                  <CommandShortcut>⌘F</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Actions\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"PlusIcon\"\n                    tabler=\"IconPlus\"\n                    hugeicons=\"PlusSignIcon\"\n                    phosphor=\"PlusIcon\"\n                    remixicon=\"RiAddLine\"\n                  />\n                  <span>New File</span>\n                  <CommandShortcut>⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"FolderPlusIcon\"\n                    tabler=\"IconFolderPlus\"\n                    hugeicons=\"FolderAddIcon\"\n                    phosphor=\"FolderPlusIcon\"\n                    remixicon=\"RiFolderAddLine\"\n                  />\n                  <span>New Folder</span>\n                  <CommandShortcut>⇧⌘N</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  <span>Copy</span>\n                  <CommandShortcut>⌘C</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  <span>Cut</span>\n                  <CommandShortcut>⌘X</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  <span>Paste</span>\n                  <CommandShortcut>⌘V</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  <span>Delete</span>\n                  <CommandShortcut>⌫</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"View\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"LayoutGridIcon\"\n                    tabler=\"IconLayoutGrid\"\n                    hugeicons=\"GridIcon\"\n                    phosphor=\"GridFourIcon\"\n                    remixicon=\"RiGridLine\"\n                  />\n                  <span>Grid View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ListIcon\"\n                    tabler=\"IconList\"\n                    hugeicons=\"Menu05Icon\"\n                    phosphor=\"ListIcon\"\n                    remixicon=\"RiListUnordered\"\n                  />\n                  <span>List View</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomInIcon\"\n                    tabler=\"IconZoomIn\"\n                    hugeicons=\"ZoomInAreaIcon\"\n                    phosphor=\"MagnifyingGlassMinusIcon\"\n                    remixicon=\"RiSearchEyeLine\"\n                  />\n                  <span>Zoom In</span>\n                  <CommandShortcut>⌘+</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ZoomOutIcon\"\n                    tabler=\"IconZoomOut\"\n                    hugeicons=\"ZoomOutAreaIcon\"\n                    phosphor=\"MagnifyingGlassPlusIcon\"\n                    remixicon=\"RiZoomInLine\"\n                  />\n                  <span>Zoom Out</span>\n                  <CommandShortcut>⌘-</CommandShortcut>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Account\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"UserIcon\"\n                    tabler=\"IconUser\"\n                    hugeicons=\"UserIcon\"\n                    phosphor=\"UserIcon\"\n                    remixicon=\"RiUserLine\"\n                  />\n                  <span>Profile</span>\n                  <CommandShortcut>⌘P</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CreditCardIcon\"\n                    tabler=\"IconCreditCard\"\n                    hugeicons=\"CreditCardIcon\"\n                    phosphor=\"CreditCardIcon\"\n                    remixicon=\"RiBankCardLine\"\n                  />\n                  <span>Billing</span>\n                  <CommandShortcut>⌘B</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"SettingsIcon\"\n                    tabler=\"IconSettings\"\n                    hugeicons=\"SettingsIcon\"\n                    phosphor=\"GearIcon\"\n                    remixicon=\"RiSettingsLine\"\n                  />\n                  <span>Settings</span>\n                  <CommandShortcut>⌘S</CommandShortcut>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"BellIcon\"\n                    tabler=\"IconBell\"\n                    hugeicons=\"NotificationIcon\"\n                    phosphor=\"BellIcon\"\n                    remixicon=\"RiNotificationLine\"\n                  />\n                  <span>Notifications</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"HelpCircleIcon\"\n                    tabler=\"IconHelpCircle\"\n                    hugeicons=\"HelpCircleIcon\"\n                    phosphor=\"QuestionIcon\"\n                    remixicon=\"RiQuestionLine\"\n                  />\n                  <span>Help & Support</span>\n                </CommandItem>\n              </CommandGroup>\n              <CommandSeparator />\n              <CommandGroup heading=\"Tools\">\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalculatorIcon\"\n                    tabler=\"IconCalculator\"\n                    hugeicons=\"CalculatorIcon\"\n                    phosphor=\"CalculatorIcon\"\n                    remixicon=\"RiCalculatorLine\"\n                  />\n                  <span>Calculator</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CalendarIcon\"\n                    tabler=\"IconCalendar\"\n                    hugeicons=\"CalendarIcon\"\n                    phosphor=\"CalendarBlankIcon\"\n                    remixicon=\"RiCalendarLine\"\n                  />\n                  <span>Calendar</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"ImageIcon\"\n                    tabler=\"IconPhoto\"\n                    hugeicons=\"ImageIcon\"\n                    phosphor=\"ImageIcon\"\n                    remixicon=\"RiImageLine\"\n                  />\n                  <span>Image Editor</span>\n                </CommandItem>\n                <CommandItem>\n                  <IconPlaceholder\n                    lucide=\"CodeIcon\"\n                    tabler=\"IconCode\"\n                    hugeicons=\"CodeIcon\"\n                    phosphor=\"CodeIcon\"\n                    remixicon=\"RiCodeLine\"\n                  />\n                  <span>Code Editor</span>\n                </CommandItem>\n              </CommandGroup>\n            </CommandList>\n          </Command>\n        </CommandDialog>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/command.json b/apps/v4/public/r/styles/radix-vega/command.json
index 2e1882d19c..9c2c7b5cce 100644
--- a/apps/v4/public/r/styles/radix-vega/command.json
+++ b/apps/v4/public/r/styles/radix-vega/command.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/radix-vega/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        \"bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden\",\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(\n          \"rounded-xl! top-1/3 translate-y-0 overflow-hidden p-0\",\n          className\n        )}\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 pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full 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 outline-none overflow-x-hidden overflow-y-auto\",\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(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\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(\"bg-border -mx-1 h-px w-auto\", 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        \"data-selected:bg-muted data-selected:text-foreground data-selected:**:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-lg! group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/radix-vega/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        \"bg-popover text-popover-foreground rounded-xl! p-1 flex size-full flex-col overflow-hidden\",\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(\n          \"rounded-xl! top-1/3 translate-y-0 overflow-hidden p-0\",\n          className\n        )}\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 pb-0\">\n      <InputGroup className=\"bg-input/30 border-input/30 h-8! rounded-lg! shadow-none! *:data-[slot=input-group-addon]:pl-2!\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full 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 outline-none overflow-x-hidden overflow-y-auto\",\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(\"text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium\", className)}\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(\"bg-border -mx-1 h-px w-auto\", 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        \"data-selected:bg-muted data-selected:text-foreground data-selected:**:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! [&_svg:not([class*='size-'])]:size-4 group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"text-muted-foreground group-data-selected/command-item:text-foreground ml-auto text-xs tracking-widest\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/context-menu-example.json b/apps/v4/public/r/styles/radix-vega/context-menu-example.json
index 3655658818..ab4a3e5baf 100644
--- a/apps/v4/public/r/styles/radix-vega/context-menu-example.json
+++ b/apps/v4/public/r/styles/radix-vega/context-menu-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/context-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 { Button } from \"@/registry/radix-vega/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-vega/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/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    </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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\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-vega/ui/context-menu\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/context-menu.json b/apps/v4/public/r/styles/radix-vega/context-menu.json
index dea7a9d9fa..2d91ef83f0 100644
--- a/apps/v4/public/r/styles/radix-vega/context-menu.json
+++ b/apps/v4/public/r/styles/radix-vega/context-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/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-vega/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          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-md p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-md border p-1 shadow-lg duration-100 cn-menu-target z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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=\"absolute right-2 pointer-events-none\">\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  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\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(\"text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/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          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-md p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 bg-popover text-popover-foreground min-w-32 rounded-md border p-1 shadow-lg duration-100 cn-menu-target z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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=\"absolute right-2 pointer-events-none\">\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        \"focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"absolute right-2 pointer-events-none\">\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(\"text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/context-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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"
     }
   ],
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 6263c42fec..6f83d91a66 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    </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>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</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=\"text-muted-foreground truncate text-xs\">\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=\"text-muted-foreground ml-auto\"\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 DropdownMenuComplex() {\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=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\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({ ...notifications, email: checked === true })\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({ ...notifications, sms: checked === true })\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    </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>Support</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</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=\"text-muted-foreground truncate text-xs\">\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=\"text-muted-foreground ml-auto\"\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 [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=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"style-maia:w-56 style-mira:w-48 style-nova:w-48 style-vega:w-56 style-lyra:w-48\">\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({ ...notifications, email: checked === true })\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({ ...notifications, sms: checked === true })\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    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/dropdown-menu.json b/apps/v4/public/r/styles/radix-vega/dropdown-menu.json
index 7439a5173d..defca5fd88 100644
--- a/apps/v4/public/r/styles/radix-vega/dropdown-menu.json
+++ b/apps/v4/public/r/styles/radix-vega/dropdown-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/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-vega/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          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-md p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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(\"text-muted-foreground px-2 py-1.5 text-xs font-medium data-[inset]:pl-8\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 cn-menu-target z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden\",\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/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          \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-32 rounded-md p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto data-[state=closed]:overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/dropdown-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none 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\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center pointer-events-none\"\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(\"text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground ml-auto text-xs tracking-widest\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground min-w-[96px] rounded-md p-1 shadow-lg ring-1 duration-100 cn-menu-target z-50 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/field-example.json b/apps/v4/public/r/styles/radix-vega/field-example.json
index 806e166c24..f6f03439ce 100644
--- a/apps/v4/public/r/styles/radix-vega/field-example.json
+++ b/apps/v4/public/r/styles/radix-vega/field-example.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/field-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-vega/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-vega/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-vega/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-vega/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport { Slider } from \"@/registry/radix-vega/ui/slider\"\nimport { Switch } from \"@/registry/radix-vega/ui/switch\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"us\">United States</SelectItem>\n              <SelectItem value=\"uk\">United Kingdom</SelectItem>\n              <SelectItem value=\"ca\">Canada</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"utc\">UTC</SelectItem>\n              <SelectItem value=\"est\">Eastern Time</SelectItem>\n              <SelectItem value=\"pst\">Pacific Time</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-vega/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-vega/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-vega/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-vega/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport { Slider } from \"@/registry/radix-vega/ui/slider\"\nimport { Switch } from \"@/registry/radix-vega/ui/switch\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"us\">United States</SelectItem>\n              <SelectItem value=\"uk\">United Kingdom</SelectItem>\n              <SelectItem value=\"ca\">Canada</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"utc\">UTC</SelectItem>\n              <SelectItem value=\"est\">Eastern Time</SelectItem>\n              <SelectItem value=\"pst\">Pacific Time</SelectItem>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectItem value=\"option1\">Option 1</SelectItem>\n              <SelectItem value=\"option2\">Option 2</SelectItem>\n              <SelectItem value=\"option3\">Option 3</SelectItem>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction HorizontalFields() {\n  return (\n    <Example title=\"Horizontal Fields\">\n      <FieldGroup className=\"**:data-[slot=field-content]:min-w-48\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-input\">Username</FieldLabel>\n            <FieldDescription>Enter your preferred username.</FieldDescription>\n          </FieldContent>\n          <Input id=\"horizontal-input\" placeholder=\"johndoe\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-textarea\">Bio</FieldLabel>\n            <FieldDescription>\n              Write a short description about yourself.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"horizontal-textarea\"\n            placeholder=\"Tell us about yourself...\"\n          />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-switch\">\n              Email Notifications\n            </FieldLabel>\n            <FieldDescription>\n              Receive email updates about your account.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"horizontal-switch\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-select\">Favorite Fruit</FieldLabel>\n            <FieldDescription>Choose your favorite fruit.</FieldDescription>\n          </FieldContent>\n          <Select>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"orange\">Orange</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-native-select\">Country</FieldLabel>\n            <FieldDescription>Select your country.</FieldDescription>\n          </FieldContent>\n          <NativeSelect id=\"horizontal-native-select\">\n            <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-slider\">Volume</FieldLabel>\n            <FieldDescription>Adjust the volume level.</FieldDescription>\n          </FieldContent>\n          <Slider id=\"horizontal-slider\" defaultValue={[50]} max={100} />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/field.json b/apps/v4/public/r/styles/radix-vega/field.json
index 8da989df6d..0b47bff899 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(\"gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\", className)}\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(\"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\", className)}\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        \"gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\"data-[invalid=true]:text-destructive gap-3 group/field flex w-full\", {\n  variants: {\n    orientation: {\n      vertical:\n        \"flex-col [&>*]:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      responsive:\n        \"flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\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        \"gap-1 group/field-content flex flex-1 flex-col 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        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-3 group/field-label peer/field-label flex w-fit leading-snug\",\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        \"gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\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-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\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(\"-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative\", className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\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-destructive text-sm font-normal\", 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(\"gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\", className)}\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(\"mb-3 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base\", className)}\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        \"gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\"data-[invalid=true]:text-destructive gap-3 group/field flex w-full\", {\n  variants: {\n    orientation: {\n      vertical:\n        \"flex-col *:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      responsive:\n        \"flex-col *:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:*:data-[slot=field-label]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\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        \"gap-1 group/field-content flex flex-1 flex-col 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        \"has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3 group/field-label peer/field-label flex w-fit leading-snug\",\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        \"gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\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-muted-foreground text-left text-sm [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-data-horizontal/field:text-balance\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\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(\"-my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2 relative\", className)}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\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-destructive text-sm font-normal\", 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/input-group.json b/apps/v4/public/r/styles/radix-vega/input-group.json
index 36e0eae734..6dbb19bcc4 100644
--- a/apps/v4/public/r/styles/radix-vega/input-group.json
+++ b/apps/v4/public/r/styles/radix-vega/input-group.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-vega/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-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport { Textarea } from \"@/registry/radix-vega/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        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-md border shadow-xs transition-[color,box-shadow] has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.25rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.25rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\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  \"gap-2 text-sm shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-5px)] p-0 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        \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1\", className)}\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(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport { Textarea } from \"@/registry/radix-vega/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        \"border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-md border shadow-xs transition-[color,box-shadow] in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 group/input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"text-muted-foreground h-auto gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4 flex cursor-text items-center justify-center select-none\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"pl-2 has-[>button]:ml-[-0.25rem] has-[>kbd]:ml-[-0.15rem] order-first\",\n        \"inline-end\": \"pr-2 has-[>button]:mr-[-0.25rem] has-[>kbd]:mr-[-0.15rem] order-last\",\n        \"block-start\":\n          \"px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2 order-first w-full justify-start\",\n        \"block-end\":\n          \"px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2 order-last w-full justify-start\",\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  \"gap-2 text-sm shadow-none flex items-center\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 rounded-[calc(var(--radius)-5px)] p-0 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        \"text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 flex items-center [&_svg]:pointer-events-none\",\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(\"rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1\", className)}\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(\"rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent flex-1 resize-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/input-otp.json b/apps/v4/public/r/styles/radix-vega/input-otp.json
index 4375473075..5d654ad3ab 100644
--- a/apps/v4/public/r/styles/radix-vega/input-otp.json
+++ b/apps/v4/public/r/styles/radix-vega/input-otp.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-vega/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-vega/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(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\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(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-[3px] flex items-center\", className)}\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        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-9 border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-[3px] relative flex items-center justify-center data-[active=true]:z-10\",\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=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\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=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/radix-vega/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(\n        \"disabled:cursor-not-allowed\",\n        className\n      )}\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(\"has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-3 flex items-center\", className)}\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        \"dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-9 border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-3 relative flex items-center justify-center data-[active=true]:z-10\",\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=\"animate-caret-blink bg-foreground h-4 w-px duration-1000 bg-foreground h-4 w-px\" />\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=\"[&_svg:not([class*='size-'])]:size-4 flex items-center\"\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/input.json b/apps/v4/public/r/styles/radix-vega/input.json
index df68c5b65d..f9116ce544 100644
--- a/apps/v4/public/r/styles/radix-vega/input.json
+++ b/apps/v4/public/r/styles/radix-vega/input.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/input.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-vega/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        \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-vega/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        \"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/item.json b/apps/v4/public/r/styles/radix-vega/item.json
index ab48dd19f9..b747714f76 100644
--- a/apps/v4/public/r/styles/radix-vega/item.json
+++ b/apps/v4/public/r/styles/radix-vega/item.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-vega/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-vega/lib/utils\"\nimport { Separator } from \"@/registry/radix-vega/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        \"gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2 group/item-group flex w-full flex-col\",\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  \"[a]:hover:bg-muted rounded-md border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 [[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  \"gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_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        \"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[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        \"gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\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        \"text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\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(\"gap-2 flex items-center\", 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        \"gap-2 flex basis-full items-center justify-between\",\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        \"gap-2 flex basis-full items-center justify-between\",\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",
+      "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-vega/lib/utils\"\nimport { Separator } from \"@/registry/radix-vega/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        \"gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2 group/item-group flex w-full flex-col\",\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  \"[a]:hover:bg-muted rounded-md border text-sm w-full group/item focus-visible:border-ring focus-visible:ring-ring/50 flex items-center flex-wrap outline-none transition-colors duration-100 focus-visible:ring-[3px] [a]:transition-colors\",\n  {\n    variants: {\n      variant: {\n        default: \"border-transparent\",\n        outline: \"border-border\",\n        muted: \"bg-muted/50 border-transparent\",\n      },\n      size: {\n        default: \"gap-3.5 px-4 py-3.5\",\n        sm: \"gap-2.5 px-3 py-2.5\",\n        xs: \"gap-2 px-2.5 py-2 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  \"gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"[&_svg:not([class*='size-'])]:size-4\",\n        image: \"size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_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        \"gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[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        \"gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center\",\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        \"text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs [&>a:hover]:text-primary line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4\",\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(\"gap-2 flex items-center\", 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        \"gap-2 flex basis-full items-center justify-between\",\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        \"gap-2 flex basis-full items-center justify-between\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/kbd.json b/apps/v4/public/r/styles/radix-vega/kbd.json
index e30074af4b..207206541d 100644
--- a/apps/v4/public/r/styles/radix-vega/kbd.json
+++ b/apps/v4/public/r/styles/radix-vega/kbd.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/kbd.tsx",
-      "content": "import { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\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(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
+      "content": "import { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Kbd({ className, ...props }: React.ComponentProps<\"kbd\">) {\n  return (\n    <kbd\n      data-slot=\"kbd\"\n      className={cn(\n        \"bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3 pointer-events-none inline-flex items-center justify-center select-none\",\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(\"gap-1 inline-flex items-center\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Kbd, KbdGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/menubar-example.json b/apps/v4/public/r/styles/radix-vega/menubar-example.json
index b46d6a8ea6..a3d324a8b3 100644
--- a/apps/v4/public/r/styles/radix-vega/menubar-example.json
+++ b/apps/v4/public/r/styles/radix-vega/menubar-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/menubar-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  Menubar,\n  MenubarCheckboxItem,\n  MenubarContent,\n  MenubarGroup,\n  MenubarItem,\n  MenubarMenu,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSeparator,\n  MenubarShortcut,\n  MenubarSub,\n  MenubarSubContent,\n  MenubarSubTrigger,\n  MenubarTrigger,\n} from \"@/registry/radix-vega/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    </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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/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-vega/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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/menubar.json b/apps/v4/public/r/styles/radix-vega/menubar.json
index 6571b6f3b5..4f3af6a955 100644
--- a/apps/v4/public/r/styles/radix-vega/menubar.json
+++ b/apps/v4/public/r/styles/radix-vega/menubar.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/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-vega/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(\"bg-background h-9 gap-1 rounded-md border p-1 shadow-xs flex items-center\", className)}\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        \"hover:bg-muted aria-expanded:bg-muted rounded-sm px-2 py-1 text-sm font-medium flex items-center outline-hidden select-none\",\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          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-md p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm data-disabled:opacity-50 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      className={cn(\n        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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(\"px-2 py-1.5 text-sm font-medium data-[inset]:pl-8\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-md p-1 shadow-lg ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/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(\"bg-background h-9 gap-1 rounded-md border p-1 shadow-xs flex items-center\", className)}\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        \"hover:bg-muted aria-expanded:bg-muted rounded-sm px-2 py-1 text-sm font-medium flex items-center outline-hidden select-none\",\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          \"bg-popover text-popover-foreground data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-md p-1 shadow-md ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\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        \"focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-disabled:opacity-50 data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 group/menubar-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm data-disabled:opacity-50 data-inset:pl-8 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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        \"focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm data-disabled:opacity-50 data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"left-2 size-4 [&_svg:not([class*='size-'])]:size-4 pointer-events-none absolute flex items-center justify-center\">\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(\"px-2 py-1.5 text-sm font-medium data-inset:pl-8\", className)}\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(\"bg-border -mx-1 my-1 h-px\", 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(\"text-muted-foreground group-focus/menubar-item:text-accent-foreground text-xs tracking-widest ml-auto\", className)}\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        \"focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4 flex cursor-default items-center outline-none select-none\",\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        \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-32 rounded-md p-1 shadow-lg ring-1 duration-100 cn-menu-target z-50 origin-(--radix-menubar-content-transform-origin) overflow-hidden\",\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/native-select.json b/apps/v4/public/r/styles/radix-vega/native-select.json
index 879d9c9f4b..5e28d722e5 100644
--- a/apps/v4/public/r/styles/radix-vega/native-select.json
+++ b/apps/v4/public/r/styles/radix-vega/native-select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-vega/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=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=sm]:h-8 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\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(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-vega/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=\"border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-8 outline-none disabled:pointer-events-none disabled:cursor-not-allowed\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({ ...props }: React.ComponentProps<\"option\">) {\n  return <option data-slot=\"native-select-option\" {...props} />\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(className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/navigation-menu.json b/apps/v4/public/r/styles/radix-vega/navigation-menu.json
index c8361f90b2..dc3a1ab1b1 100644
--- a/apps/v4/public/r/styles/radix-vega/navigation-menu.json
+++ b/apps/v4/public/r/styles/radix-vega/navigation-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/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-vega/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        \"max-w-max 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        \"gap-0 group flex flex-1 list-none items-center justify-center\",\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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-4 py-2 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\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-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-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        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-2 pr-2.5 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full 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 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\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          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 rounded-lg shadow ring-1 duration-100 origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden md:w-[var(--radix-navigation-menu-viewport-width)]\",\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(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\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",
+      "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-vega/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        \"max-w-max 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        \"gap-0 group flex flex-1 list-none items-center justify-center\",\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  \"bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-4 py-2 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50 group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center disabled:pointer-events-none outline-none\"\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-open/navigation-menu-trigger:rotate-180 group-data-popup-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        \"data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:ring-foreground/10 p-2 pr-2.5 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:duration-300 top-0 left-0 w-full 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 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto\",\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          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:zoom-out-95 data-open:zoom-in-90 ring-foreground/10 rounded-lg shadow ring-1 duration-100 origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden md:w-(--radix-navigation-menu-viewport-width)\",\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(\"data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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        \"data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-1 flex h-1.5 items-end justify-center overflow-hidden\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"bg-border rounded-tl-sm shadow-md relative top-[60%] h-2 w-2 rotate-45\" />\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/radio-group.json b/apps/v4/public/r/styles/radix-vega/radio-group.json
index 1030756f8a..0438c3f0cd 100644
--- a/apps/v4/public/r/styles/radix-vega/radio-group.json
+++ b/apps/v4/public/r/styles/radix-vega/radio-group.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/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-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\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 gap-3 w-full\", 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        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full shadow-xs focus-visible:ring-[3px] aria-invalid:ring-[3px] group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          phosphor=\"CircleIcon\"\n          remixicon=\"RiCircleLine\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\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 gap-3 w-full\", 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        \"border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full shadow-xs focus-visible:ring-3 aria-invalid:ring-3 group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"group-aria-invalid/radio-group-item:text-destructive text-primary flex size-4 items-center justify-center\"\n      >\n        <IconPlaceholder\n          lucide=\"CircleIcon\"\n          tabler=\"IconCircle\"\n          hugeicons=\"CircleIcon\"\n          phosphor=\"CircleIcon\"\n          remixicon=\"RiCircleLine\"\n          className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 fill-current\"\n        />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/resizable.json b/apps/v4/public/r/styles/radix-vega/resizable.json
index fb3dcb8ce0..eb0fbca4ce 100644
--- a/apps/v4/public/r/styles/radix-vega/resizable.json
+++ b/apps/v4/public/r/styles/radix-vega/resizable.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/resizable.tsx",
-      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-vega/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        \"bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 ring-offset-background 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=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
+      "content": "\"use client\"\n\nimport * as ResizablePrimitive from \"react-resizable-panels\"\n\nimport { cn } from \"@/registry/radix-vega/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        \"bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 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=\"bg-border h-6 w-1 rounded-lg z-10 flex shrink-0\" />\n      )}\n    </ResizablePrimitive.Separator>\n  )\n}\n\nexport { ResizableHandle, ResizablePanel, ResizablePanelGroup }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/select.json b/apps/v4/public/r/styles/radix-vega/select.json
index 75ee2d15da..3c6b776e1b 100644
--- a/apps/v4/public/r/styles/radix-vega/select.json
+++ b/apps/v4/public/r/styles/radix-vega/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/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-vega/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 p-1\", 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        \"border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"text-muted-foreground size-4 pointer-events-none\"\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          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-md shadow-md ring-1 duration-100 cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none\",\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-[var(--radix-select-trigger-height)] data-[position=popper]:w-full data-[position=popper]:min-w-[var(--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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\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        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"bg-border -mx-1 my-1 h-px pointer-events-none\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/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 p-1\", 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        \"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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=\"text-muted-foreground size-4 pointer-events-none\"\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          \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-md shadow-md ring-1 duration-100 cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none\",\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(\"text-muted-foreground px-2 py-1.5 text-xs\", className)}\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        \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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(\"bg-border -mx-1 my-1 h-px pointer-events-none\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/separator.json b/apps/v4/public/r/styles/radix-vega/separator.json
index 05dd8166d2..7ff2981a23 100644
--- a/apps/v4/public/r/styles/radix-vega/separator.json
+++ b/apps/v4/public/r/styles/radix-vega/separator.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/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-vega/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        \"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Separator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Separator as SeparatorPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/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        \"bg-border shrink-0 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/switch.json b/apps/v4/public/r/styles/radix-vega/switch.json
index 0cd67bb164..3b2e352e24 100644
--- a/apps/v4/public/r/styles/radix-vega/switch.json
+++ b/apps/v4/public/r/styles/radix-vega/switch.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/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-vega/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        \"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent shadow-xs focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 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=\"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Switch as SwitchPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/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        \"data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent shadow-xs focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-all outline-none after:absolute after:-inset-x-3 after:-inset-y-2 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=\"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform\"\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/tabs.json b/apps/v4/public/r/styles/radix-vega/tabs.json
index 51d0d33fcc..c2f0d18a4a 100644
--- a/apps/v4/public/r/styles/radix-vega/tabs.json
+++ b/apps/v4/public/r/styles/radix-vega/tabs.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/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-vega/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        \"gap-2 group/tabs flex data-[orientation=horizontal]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-lg p-[3px] group-data-horizontal/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=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        \"gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=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(\"text-sm flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
+      "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-vega/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        \"gap-2 group/tabs flex data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"rounded-lg p-[3px] group-data-horizontal/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center 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        \"gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg:not([class*='size-'])]:size-4 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center whitespace-nowrap transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\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 dark:data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 data-active:text-foreground\",\n        \"after:bg-foreground after:absolute 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(\"text-sm flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/textarea.json b/apps/v4/public/r/styles/radix-vega/textarea.json
index 5377d4b4f2..2faf84f656 100644
--- a/apps/v4/public/r/styles/radix-vega/textarea.json
+++ b/apps/v4/public/r/styles/radix-vega/textarea.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/ui/textarea.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-vega/lib/utils\"\n\nfunction Textarea({ className, ...props }: React.ComponentProps<\"textarea\">) {\n  return (\n    <textarea\n      data-slot=\"textarea\"\n      className={cn(\n        \"border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 md:text-sm placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full outline-none disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Textarea }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/toggle-group.json b/apps/v4/public/r/styles/radix-vega/toggle-group.json
index d5c669d39e..8c48c623c2 100644
--- a/apps/v4/public/r/styles/radix-vega/toggle-group.json
+++ b/apps/v4/public/r/styles/radix-vega/toggle-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-vega/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-vega/lib/utils\"\nimport { toggleVariants } from \"@/registry/radix-vega/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        \"rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] data-[orientation=vertical]:flex-col data-[orientation=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        \"data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md shrink-0 focus:z-10 focus-visible:z-10 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",
+      "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-vega/lib/utils\"\nimport { toggleVariants } from \"@/registry/radix-vega/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        \"rounded-md data-[spacing=0]:data-[variant=outline]:shadow-xs group/toggle-group flex w-fit flex-row items-center gap-[--spacing(var(--gap))] 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        \"data-[state=on]:bg-muted group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:px-2 group-data-[spacing=0]/toggle-group:shadow-none group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-l-md group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-t-md group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-r-md group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-b-md shrink-0 focus:z-10 focus-visible:z-10 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"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/tooltip.json b/apps/v4/public/r/styles/radix-vega/tooltip.json
index 22e7a80db0..3e5f672189 100644
--- a/apps/v4/public/r/styles/radix-vega/tooltip.json
+++ b/apps/v4/public/r/styles/radix-vega/tooltip.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-vega/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-vega/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 (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\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          \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin)\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50 translate-y-[calc(-50%_-_2px)]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Tooltip as TooltipPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-vega/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 (\n    <TooltipProvider>\n      <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n    </TooltipProvider>\n  )\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          \"data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 rounded-md px-3 py-1.5 text-xs bg-foreground text-background z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin)\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground z-50 translate-y-[calc(-50%_-_2px)]\" />\n      </TooltipPrimitive.Content>\n    </TooltipPrimitive.Portal>\n  )\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/registry/bases/base/examples/command-example.tsx b/apps/v4/registry/bases/base/examples/command-example.tsx
index 6ccf1c7132..6d972981e8 100644
--- a/apps/v4/registry/bases/base/examples/command-example.tsx
+++ b/apps/v4/registry/bases/base/examples/command-example.tsx
@@ -7,6 +7,7 @@ import {
   ExampleWrapper,
 } from "@/registry/bases/base/components/example"
 import { Button } from "@/registry/bases/base/ui/button"
+import { Card, CardContent } from "@/registry/bases/base/ui/card"
 import {
   Command,
   CommandDialog,
@@ -35,80 +36,84 @@ export default function CommandExample() {
 function CommandInline() {
   return (
     <Example title="Inline">
-      <Command className="cn-command-inline rounded-lg border shadow-md md:min-w-[450px]">
-        <CommandInput placeholder="Type a command or search..." />
-        <CommandList>
-          <CommandEmpty>No results found.</CommandEmpty>
-          <CommandGroup heading="Suggestions">
-            <CommandItem>
-              <IconPlaceholder
-                lucide="CalendarIcon"
-                tabler="IconCalendar"
-                hugeicons="CalendarIcon"
-                phosphor="CalendarBlankIcon"
-                remixicon="RiCalendarLine"
-              />
-              <span>Calendar</span>
-            </CommandItem>
-            <CommandItem>
-              <IconPlaceholder
-                lucide="SmileIcon"
-                tabler="IconMoodSmile"
-                hugeicons="SmileIcon"
-                phosphor="SmileyIcon"
-                remixicon="RiEmotionLine"
-              />
-              <span>Search Emoji</span>
-            </CommandItem>
-            <CommandItem>
-              <IconPlaceholder
-                lucide="CalculatorIcon"
-                tabler="IconCalculator"
-                hugeicons="CalculatorIcon"
-                phosphor="CalculatorIcon"
-                remixicon="RiCalculatorLine"
-              />
-              <span>Calculator</span>
-            </CommandItem>
-          </CommandGroup>
-          <CommandSeparator />
-          <CommandGroup heading="Settings">
-            <CommandItem>
-              <IconPlaceholder
-                lucide="UserIcon"
-                tabler="IconUser"
-                hugeicons="UserIcon"
-                phosphor="UserIcon"
-                remixicon="RiUserLine"
-              />
-              <span>Profile</span>
-              <CommandShortcut>⌘P</CommandShortcut>
-            </CommandItem>
-            <CommandItem>
-              <IconPlaceholder
-                lucide="CreditCardIcon"
-                tabler="IconCreditCard"
-                hugeicons="CreditCardIcon"
-                phosphor="CreditCardIcon"
-                remixicon="RiBankCardLine"
-              />
-              <span>Billing</span>
-              <CommandShortcut>⌘B</CommandShortcut>
-            </CommandItem>
-            <CommandItem>
-              <IconPlaceholder
-                lucide="SettingsIcon"
-                tabler="IconSettings"
-                hugeicons="SettingsIcon"
-                phosphor="GearIcon"
-                remixicon="RiSettingsLine"
-              />
-              <span>Settings</span>
-              <CommandShortcut>⌘S</CommandShortcut>
-            </CommandItem>
-          </CommandGroup>
-        </CommandList>
-      </Command>
+      <Card className="p-0">
+        <CardContent className="p-0">
+          <Command>
+            <CommandInput placeholder="Type a command or search..." />
+            <CommandList>
+              <CommandEmpty>No results found.</CommandEmpty>
+              <CommandGroup heading="Suggestions">
+                <CommandItem>
+                  <IconPlaceholder
+                    lucide="CalendarIcon"
+                    tabler="IconCalendar"
+                    hugeicons="CalendarIcon"
+                    phosphor="CalendarBlankIcon"
+                    remixicon="RiCalendarLine"
+                  />
+                  <span>Calendar</span>
+                </CommandItem>
+                <CommandItem>
+                  <IconPlaceholder
+                    lucide="SmileIcon"
+                    tabler="IconMoodSmile"
+                    hugeicons="SmileIcon"
+                    phosphor="SmileyIcon"
+                    remixicon="RiEmotionLine"
+                  />
+                  <span>Search Emoji</span>
+                </CommandItem>
+                <CommandItem>
+                  <IconPlaceholder
+                    lucide="CalculatorIcon"
+                    tabler="IconCalculator"
+                    hugeicons="CalculatorIcon"
+                    phosphor="CalculatorIcon"
+                    remixicon="RiCalculatorLine"
+                  />
+                  <span>Calculator</span>
+                </CommandItem>
+              </CommandGroup>
+              <CommandSeparator />
+              <CommandGroup heading="Settings">
+                <CommandItem>
+                  <IconPlaceholder
+                    lucide="UserIcon"
+                    tabler="IconUser"
+                    hugeicons="UserIcon"
+                    phosphor="UserIcon"
+                    remixicon="RiUserLine"
+                  />
+                  <span>Profile</span>
+                  <CommandShortcut>⌘P</CommandShortcut>
+                </CommandItem>
+                <CommandItem>
+                  <IconPlaceholder
+                    lucide="CreditCardIcon"
+                    tabler="IconCreditCard"
+                    hugeicons="CreditCardIcon"
+                    phosphor="CreditCardIcon"
+                    remixicon="RiBankCardLine"
+                  />
+                  <span>Billing</span>
+                  <CommandShortcut>⌘B</CommandShortcut>
+                </CommandItem>
+                <CommandItem>
+                  <IconPlaceholder
+                    lucide="SettingsIcon"
+                    tabler="IconSettings"
+                    hugeicons="SettingsIcon"
+                    phosphor="GearIcon"
+                    remixicon="RiSettingsLine"
+                  />
+                  <span>Settings</span>
+                  <CommandShortcut>⌘S</CommandShortcut>
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </CardContent>
+      </Card>
     </Example>
   )
 }
diff --git a/apps/v4/registry/bases/base/ui/navigation-menu.tsx b/apps/v4/registry/bases/base/ui/navigation-menu.tsx
index 8bcae7c4bb..d210c3bdcb 100644
--- a/apps/v4/registry/bases/base/ui/navigation-menu.tsx
+++ b/apps/v4/registry/bases/base/ui/navigation-menu.tsx
@@ -92,7 +92,7 @@ function NavigationMenuContent({
     <NavigationMenuPrimitive.Content
       data-slot="navigation-menu-content"
       className={cn(
-        "cn-navigation-menu-content h-full w-auto transition-[opacity,transform,translate] duration-[0.35s] data-ending-style:opacity-0 data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none data-starting-style:opacity-0 data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%]",
+        "cn-navigation-menu-content 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 transition-[opacity,transform,translate] duration-[0.35s] data-ending-style:opacity-0 data-starting-style:opacity-0 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
         className
       )}
       {...props}
diff --git a/apps/v4/registry/bases/radix/examples/command-example.tsx b/apps/v4/registry/bases/radix/examples/command-example.tsx
index 5542c0a28b..d5e486a145 100644
--- a/apps/v4/registry/bases/radix/examples/command-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/command-example.tsx
@@ -7,6 +7,7 @@ import {
   ExampleWrapper,
 } from "@/registry/bases/radix/components/example"
 import { Button } from "@/registry/bases/radix/ui/button"
+import { Card, CardContent } from "@/registry/bases/radix/ui/card"
 import {
   Command,
   CommandDialog,
@@ -35,80 +36,84 @@ export default function CommandExample() {
 function CommandInline() {
   return (
     <Example title="Inline">
-      <Command className="cn-command-inline rounded-lg border shadow-md md:min-w-[450px]">
-        <CommandInput placeholder="Type a command or search..." />
-        <CommandList>
-          <CommandEmpty>No results found.</CommandEmpty>
-          <CommandGroup heading="Suggestions">
-            <CommandItem>
-              <IconPlaceholder
-                lucide="CalendarIcon"
-                tabler="IconCalendar"
-                hugeicons="CalendarIcon"
-                phosphor="CalendarBlankIcon"
-                remixicon="RiCalendarLine"
-              />
-              <span>Calendar</span>
-            </CommandItem>
-            <CommandItem>
-              <IconPlaceholder
-                lucide="SmileIcon"
-                tabler="IconMoodSmile"
-                hugeicons="SmileIcon"
-                phosphor="SmileyIcon"
-                remixicon="RiEmotionLine"
-              />
-              <span>Search Emoji</span>
-            </CommandItem>
-            <CommandItem>
-              <IconPlaceholder
-                lucide="CalculatorIcon"
-                tabler="IconCalculator"
-                hugeicons="CalculatorIcon"
-                phosphor="CalculatorIcon"
-                remixicon="RiCalculatorLine"
-              />
-              <span>Calculator</span>
-            </CommandItem>
-          </CommandGroup>
-          <CommandSeparator />
-          <CommandGroup heading="Settings">
-            <CommandItem>
-              <IconPlaceholder
-                lucide="UserIcon"
-                tabler="IconUser"
-                hugeicons="UserIcon"
-                phosphor="UserIcon"
-                remixicon="RiUserLine"
-              />
-              <span>Profile</span>
-              <CommandShortcut>⌘P</CommandShortcut>
-            </CommandItem>
-            <CommandItem>
-              <IconPlaceholder
-                lucide="CreditCardIcon"
-                tabler="IconCreditCard"
-                hugeicons="CreditCardIcon"
-                phosphor="CreditCardIcon"
-                remixicon="RiBankCardLine"
-              />
-              <span>Billing</span>
-              <CommandShortcut>⌘B</CommandShortcut>
-            </CommandItem>
-            <CommandItem>
-              <IconPlaceholder
-                lucide="SettingsIcon"
-                tabler="IconSettings"
-                hugeicons="SettingsIcon"
-                phosphor="GearIcon"
-                remixicon="RiSettingsLine"
-              />
-              <span>Settings</span>
-              <CommandShortcut>⌘S</CommandShortcut>
-            </CommandItem>
-          </CommandGroup>
-        </CommandList>
-      </Command>
+      <Card className="p-0">
+        <CardContent className="p-0">
+          <Command>
+            <CommandInput placeholder="Type a command or search..." />
+            <CommandList>
+              <CommandEmpty>No results found.</CommandEmpty>
+              <CommandGroup heading="Suggestions">
+                <CommandItem>
+                  <IconPlaceholder
+                    lucide="CalendarIcon"
+                    tabler="IconCalendar"
+                    hugeicons="CalendarIcon"
+                    phosphor="CalendarBlankIcon"
+                    remixicon="RiCalendarLine"
+                  />
+                  <span>Calendar</span>
+                </CommandItem>
+                <CommandItem>
+                  <IconPlaceholder
+                    lucide="SmileIcon"
+                    tabler="IconMoodSmile"
+                    hugeicons="SmileIcon"
+                    phosphor="SmileyIcon"
+                    remixicon="RiEmotionLine"
+                  />
+                  <span>Search Emoji</span>
+                </CommandItem>
+                <CommandItem>
+                  <IconPlaceholder
+                    lucide="CalculatorIcon"
+                    tabler="IconCalculator"
+                    hugeicons="CalculatorIcon"
+                    phosphor="CalculatorIcon"
+                    remixicon="RiCalculatorLine"
+                  />
+                  <span>Calculator</span>
+                </CommandItem>
+              </CommandGroup>
+              <CommandSeparator />
+              <CommandGroup heading="Settings">
+                <CommandItem>
+                  <IconPlaceholder
+                    lucide="UserIcon"
+                    tabler="IconUser"
+                    hugeicons="UserIcon"
+                    phosphor="UserIcon"
+                    remixicon="RiUserLine"
+                  />
+                  <span>Profile</span>
+                  <CommandShortcut>⌘P</CommandShortcut>
+                </CommandItem>
+                <CommandItem>
+                  <IconPlaceholder
+                    lucide="CreditCardIcon"
+                    tabler="IconCreditCard"
+                    hugeicons="CreditCardIcon"
+                    phosphor="CreditCardIcon"
+                    remixicon="RiBankCardLine"
+                  />
+                  <span>Billing</span>
+                  <CommandShortcut>⌘B</CommandShortcut>
+                </CommandItem>
+                <CommandItem>
+                  <IconPlaceholder
+                    lucide="SettingsIcon"
+                    tabler="IconSettings"
+                    hugeicons="SettingsIcon"
+                    phosphor="GearIcon"
+                    remixicon="RiSettingsLine"
+                  />
+                  <span>Settings</span>
+                  <CommandShortcut>⌘S</CommandShortcut>
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </CardContent>
+      </Card>
     </Example>
   )
 }
diff --git a/apps/v4/registry/bases/radix/ui/chart.tsx b/apps/v4/registry/bases/radix/ui/chart.tsx
index 38fcd437b1..c985cb6319 100644
--- a/apps/v4/registry/bases/radix/ui/chart.tsx
+++ b/apps/v4/registry/bases/radix/ui/chart.tsx
@@ -86,13 +86,13 @@ const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
             ([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")}
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color
+    return color ? `  --color-${key}: ${color};` : null
+  })
+  .join("\n")}
 }
 `
           )
@@ -172,10 +172,7 @@ function ChartTooltipContent({
 
   return (
     <div
-      className={cn(
-        "cn-chart-tooltip grid min-w-32 items-start",
-        className
-      )}
+      className={cn("cn-chart-tooltip grid min-w-32 items-start", className)}
     >
       {!nestLabel ? tooltipLabel : null}
       <div className="grid gap-1.5">
@@ -319,8 +316,8 @@ function getPayloadConfigFromPayload(
 
   const payloadPayload =
     "payload" in payload &&
-      typeof payload.payload === "object" &&
-      payload.payload !== null
+    typeof payload.payload === "object" &&
+    payload.payload !== null
       ? payload.payload
       : undefined
 
diff --git a/apps/v4/registry/bases/radix/ui/select.tsx b/apps/v4/registry/bases/radix/ui/select.tsx
index d9992475f4..ec65f89e0f 100644
--- a/apps/v4/registry/bases/radix/ui/select.tsx
+++ b/apps/v4/registry/bases/radix/ui/select.tsx
@@ -79,7 +79,7 @@ function SelectContent({
         className={cn(
           "cn-select-content cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none",
           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",
+            "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}
diff --git a/apps/v4/registry/styles/style-lyra.css b/apps/v4/registry/styles/style-lyra.css
index d97ae8855e..fd57580948 100644
--- a/apps/v4/registry/styles/style-lyra.css
+++ b/apps/v4/registry/styles/style-lyra.css
@@ -358,7 +358,7 @@
   }
 
   .cn-command-group {
-    @apply text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs;
+    @apply text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs;
   }
 
   .cn-command-separator {
@@ -366,7 +366,7 @@
   }
 
   .cn-command-item {
-    @apply data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-none!;
+    @apply data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-none px-2 py-2 text-xs outline-hidden select-none in-data-[slot=dialog-content]:rounded-none! [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-command-shortcut {
@@ -383,15 +383,15 @@
   }
 
   .cn-context-menu-item {
-    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-context-menu-checkbox-item {
-    @apply focus:bg-accent focus:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-context-menu-radio-item {
-    @apply focus:bg-accent focus:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-context-menu-item-indicator {
@@ -399,7 +399,7 @@
   }
 
   .cn-context-menu-label {
-    @apply text-muted-foreground px-2 py-2 text-xs;
+    @apply text-muted-foreground px-2 py-2 text-xs data-inset:pl-7;
   }
 
   .cn-context-menu-separator {
@@ -411,7 +411,7 @@
   }
 
   .cn-context-menu-sub-trigger {
-    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-context-menu-sub-content {
@@ -486,15 +486,15 @@
   }
 
   .cn-dropdown-menu-item {
-    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-dropdown-menu-checkbox-item {
-    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-dropdown-menu-radio-item {
-    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-8 pl-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-dropdown-menu-item-indicator {
@@ -502,7 +502,7 @@
   }
 
   .cn-dropdown-menu-label {
-    @apply text-muted-foreground px-2 py-2 text-xs;
+    @apply text-muted-foreground px-2 py-2 text-xs data-inset:pl-7;
   }
 
   .cn-dropdown-menu-separator {
@@ -514,7 +514,7 @@
   }
 
   .cn-dropdown-menu-sub-trigger {
-    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-dropdown-menu-sub-content {
@@ -568,7 +568,7 @@
   }
 
   .cn-field-group {
-    @apply gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4;
+    @apply gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4;
   }
 
   .cn-field {
@@ -580,7 +580,7 @@
   }
 
   .cn-field-label {
-    @apply has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2;
+    @apply has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-2;
   }
 
   .cn-field-title {
@@ -664,11 +664,11 @@
   }
 
   .cn-item-size-xs {
-    @apply gap-2 px-2.5 py-2 [[data-slot=dropdown-menu-content]_&]:p-0;
+    @apply gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0;
   }
 
   .cn-item-media {
-    @apply gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start;
+    @apply gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start;
   }
 
   .cn-item-media-variant-default {
@@ -708,7 +708,7 @@
   }
 
   .cn-item-group {
-    @apply gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2;
+    @apply gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2;
   }
 
   .cn-item-separator {
@@ -717,7 +717,7 @@
 
   /* MARK: Kbd */
   .cn-kbd {
-    @apply bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-none px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3;
+    @apply bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-none px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3;
   }
 
   .cn-kbd-group {
@@ -747,11 +747,11 @@
   }
 
   .cn-menubar-item {
-    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-disabled:opacity-50 data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-menubar-checkbox-item {
-    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-2 pl-7 text-xs data-disabled:opacity-50;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-28 pl-8 text-xs data-disabled:opacity-50 data-inset:pl-8;
   }
 
   .cn-menubar-checkbox-item-indicator {
@@ -759,7 +759,7 @@
   }
 
   .cn-menubar-radio-item {
-    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-2 pl-7 text-xs data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-none py-2 pr-2 pl-8 text-xs data-disabled:opacity-50 data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-menubar-radio-item-indicator {
@@ -767,7 +767,7 @@
   }
 
   .cn-menubar-label {
-    @apply px-2 py-2 text-xs data-[inset]:pl-8;
+    @apply px-2 py-2 text-xs data-inset:pl-8;
   }
 
   .cn-menubar-separator {
@@ -779,7 +779,7 @@
   }
 
   .cn-menubar-sub-trigger {
-    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-none px-2 py-2 text-xs data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-menubar-sub-content {
@@ -800,11 +800,11 @@
   }
 
   .cn-navigation-menu-link {
-    @apply data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-none p-2 text-xs transition-all outline-none focus-visible:ring-1 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 [[data-slot=navigation-menu-content]_&]:rounded-none;
+    @apply data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-none p-2 text-xs transition-all outline-none focus-visible:ring-1 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-navigation-menu-trigger-icon {
-    @apply relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180;
+    @apply relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180;
   }
 
   .cn-navigation-menu-content {
@@ -828,7 +828,7 @@
   }
 
   .cn-navigation-menu-popup {
-    @apply bg-popover text-popover-foreground ring-foreground/10 rounded-none shadow ring-1 transition-all 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;
+    @apply bg-popover text-popover-foreground ring-foreground/10 rounded-none shadow ring-1 transition-all 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;
   }
 
   /* MARK: Native Select */
@@ -932,7 +932,7 @@
 
   /* MARK: Select */
   .cn-select-trigger {
-    @apply border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-none border bg-transparent py-2 pr-2 pl-2.5 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-none *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4;
+    @apply border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-none border bg-transparent py-2 pr-2 pl-2.5 text-xs transition-colors select-none focus-visible:ring-1 aria-invalid:ring-1 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-none *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-select-value {
@@ -1273,7 +1273,7 @@
   }
 
   .cn-tooltip-arrow {
-    @apply size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-none;
+    @apply size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-none;
   }
 
   .cn-tooltip-arrow-logical {
@@ -1282,7 +1282,7 @@
 
   /* MARK: Input Group */
   .cn-input-group {
-    @apply border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-none border transition-colors has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot][aria-invalid=true]]:ring-1 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0;
+    @apply border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-none border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-1 has-[[data-slot][aria-invalid=true]]:ring-1 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5;
   }
 
   .cn-input-group-addon {
diff --git a/apps/v4/registry/styles/style-maia.css b/apps/v4/registry/styles/style-maia.css
index 16cc16c663..9fac9587ab 100644
--- a/apps/v4/registry/styles/style-maia.css
+++ b/apps/v4/registry/styles/style-maia.css
@@ -379,7 +379,7 @@
   }
 
   .cn-command-group {
-    @apply text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-3 [&_[cmdk-group-heading]]:py-2 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium;
+    @apply text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium;
   }
 
   .cn-command-separator {
@@ -387,7 +387,7 @@
   }
 
   .cn-command-item {
-    @apply data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-lg px-3 py-2 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-2xl;
+    @apply data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-lg px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-2xl [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-command-shortcut {
@@ -404,15 +404,15 @@
   }
 
   .cn-context-menu-item {
-    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-context-menu-checkbox-item {
-    @apply focus:bg-accent focus:text-accent-foreground gap-2 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground gap-2 rounded-xl py-2 pr-8 pl-3 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-context-menu-radio-item {
-    @apply focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-context-menu-item-indicator {
@@ -420,7 +420,7 @@
   }
 
   .cn-context-menu-label {
-    @apply text-muted-foreground px-3 py-2.5 text-xs;
+    @apply text-muted-foreground px-3 py-2.5 text-xs data-inset:pl-9.5;
   }
 
   .cn-context-menu-separator {
@@ -432,7 +432,7 @@
   }
 
   .cn-context-menu-sub-trigger {
-    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-xl px-3 py-2 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-context-menu-sub-content {
@@ -511,15 +511,15 @@
   }
 
   .cn-dropdown-menu-item {
-    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-dropdown-menu-checkbox-item {
-    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-dropdown-menu-radio-item {
-    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-dropdown-menu-item-indicator {
@@ -527,7 +527,7 @@
   }
 
   .cn-dropdown-menu-label {
-    @apply text-muted-foreground px-3 py-2.5 text-xs;
+    @apply text-muted-foreground px-3 py-2.5 text-xs data-inset:pl-9.5;
   }
 
   .cn-dropdown-menu-separator {
@@ -539,7 +539,7 @@
   }
 
   .cn-dropdown-menu-sub-trigger {
-    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-dropdown-menu-sub-content {
@@ -593,7 +593,7 @@
   }
 
   .cn-field-group {
-    @apply gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4;
+    @apply gap-7 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4;
   }
 
   .cn-field {
@@ -605,7 +605,7 @@
   }
 
   .cn-field-label {
-    @apply has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4;
+    @apply has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-xl has-[>[data-slot=field]]:border *:data-[slot=field]:p-4;
   }
 
   .cn-field-title {
@@ -689,11 +689,11 @@
   }
 
   .cn-item-size-xs {
-    @apply gap-2.5 px-3 py-2.5 [[data-slot=dropdown-menu-content]_&]:p-0;
+    @apply gap-2.5 px-3 py-2.5 in-data-[slot=dropdown-menu-content]:p-0;
   }
 
   .cn-item-media {
-    @apply gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start;
+    @apply gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start;
   }
 
   .cn-item-media-variant-default {
@@ -733,7 +733,7 @@
   }
 
   .cn-item-group {
-    @apply gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2;
+    @apply gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2;
   }
 
   .cn-item-separator {
@@ -742,7 +742,7 @@
 
   /* MARK: Kbd */
   .cn-kbd {
-    @apply bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3;
+    @apply bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3;
   }
 
   .cn-kbd-group {
@@ -772,27 +772,27 @@
   }
 
   .cn-menubar-item {
-    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-xl px-3 py-2 text-sm data-disabled:opacity-50 data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-menubar-checkbox-item {
-    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-3 pl-8 text-sm data-disabled:opacity-50;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-3 pl-9.5 text-sm data-disabled:opacity-50 data-inset:pl-9.5;
   }
 
   .cn-menubar-checkbox-item-indicator {
-    @apply left-2 size-4 [&_svg:not([class*='size-'])]:size-4;
+    @apply left-3 size-4 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-menubar-radio-item {
-    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-3 pl-8 text-sm data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-xl py-2 pr-3 pl-9.5 text-sm data-disabled:opacity-50 data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-menubar-radio-item-indicator {
-    @apply left-2 size-4 [&_svg:not([class*='size-'])]:size-4;
+    @apply left-3 size-4 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-menubar-label {
-    @apply text-muted-foreground px-3.5 py-2.5 text-xs data-[inset]:pl-8;
+    @apply text-muted-foreground px-3.5 py-2.5 text-xs data-inset:pl-9.5;
   }
 
   .cn-menubar-separator {
@@ -804,7 +804,7 @@
   }
 
   .cn-menubar-sub-trigger {
-    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-xl px-3 py-2 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-menubar-sub-content {
@@ -825,7 +825,7 @@
   }
 
   .cn-navigation-menu-trigger-icon {
-    @apply relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180;
+    @apply relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180;
   }
 
   .cn-navigation-menu-content {
@@ -853,7 +853,7 @@
   }
 
   .cn-navigation-menu-popup {
-    @apply bg-popover text-popover-foreground ring-foreground/5 rounded-2xl shadow ring-1 transition-all 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;
+    @apply bg-popover text-popover-foreground ring-foreground/5 rounded-2xl shadow ring-1 transition-all 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;
   }
 
   /* MARK: Native Select */
@@ -957,7 +957,7 @@
 
   /* MARK: Select */
   .cn-select-trigger {
-    @apply border-input data-[placeholder]:text-muted-foreground bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-4xl border px-3 py-2 text-sm transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4;
+    @apply border-input data-placeholder:text-muted-foreground bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-4xl border px-3 py-2 text-sm transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-select-value {
@@ -1298,7 +1298,7 @@
   }
 
   .cn-tooltip-arrow {
-    @apply size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px] data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px];
+    @apply size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] data-[side=left]:translate-x-[-1.5px] data-[side=right]:translate-x-[1.5px];
   }
 
   .cn-tooltip-arrow-logical {
@@ -1307,7 +1307,7 @@
 
   /* MARK: Input Group */
   .cn-input-group {
-    @apply border-input bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-4xl border transition-colors has-data-[align=block-end]:rounded-2xl has-data-[align=block-start]:rounded-2xl has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[textarea]:rounded-xl 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0;
+    @apply border-input bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-4xl border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-2xl has-data-[align=block-start]:rounded-2xl has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] has-[textarea]:rounded-xl 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5;
   }
 
   .cn-input-group-addon {
@@ -1315,11 +1315,11 @@
   }
 
   .cn-input-group-addon-align-inline-start {
-    @apply pl-3 has-[>button]:ml-[-0.25rem] has-[>kbd]:ml-[-0.15rem];
+    @apply pl-3 has-[>button]:-ml-1 has-[>kbd]:ml-[-0.15rem];
   }
 
   .cn-input-group-addon-align-inline-end {
-    @apply pr-3 has-[>button]:mr-[-0.25rem] has-[>kbd]:mr-[-0.15rem];
+    @apply pr-3 has-[>button]:-mr-1 has-[>kbd]:mr-[-0.15rem];
   }
 
   .cn-input-group-addon-align-block-start {
diff --git a/apps/v4/registry/styles/style-mira.css b/apps/v4/registry/styles/style-mira.css
index e1c7224047..38f8444463 100644
--- a/apps/v4/registry/styles/style-mira.css
+++ b/apps/v4/registry/styles/style-mira.css
@@ -147,7 +147,7 @@
 
   /* MARK: Button */
   .cn-button {
-    @apply focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium focus-visible:ring-[2px] aria-invalid:ring-[2px] [&_svg:not([class*='size-'])]:size-4;
+    @apply focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-xs/relaxed font-medium focus-visible:ring-2 aria-invalid:ring-2 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-button-variant-default {
@@ -233,7 +233,7 @@
   }
 
   .cn-calendar-dropdown-root {
-    @apply has-focus:border-ring border-input has-focus:ring-ring/30 border has-focus:ring-[2px];
+    @apply has-focus:border-ring border-input has-focus:ring-ring/30 border has-focus:ring-2;
   }
 
   .cn-calendar-caption-label {
@@ -281,7 +281,7 @@
 
   /* MARK: Checkbox */
   .cn-checkbox {
-    @apply border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[2px] aria-invalid:ring-[2px];
+    @apply border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-2 aria-invalid:ring-2;
   }
 
   .cn-checkbox-indicator {
@@ -334,7 +334,7 @@
   }
 
   .cn-combobox-chips {
-    @apply bg-input/20 dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/30 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-7 flex-wrap items-center gap-1 rounded-md border bg-clip-padding px-2 py-0.5 text-xs/relaxed transition-colors focus-within:ring-[2px] has-aria-invalid:ring-[2px] has-data-[slot=combobox-chip]:px-1;
+    @apply bg-input/20 dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/30 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-7 flex-wrap items-center gap-1 rounded-md border bg-clip-padding px-2 py-0.5 text-xs/relaxed transition-colors focus-within:ring-2 has-aria-invalid:ring-2 has-data-[slot=combobox-chip]:px-1;
   }
 
   .cn-combobox-chip {
@@ -379,7 +379,7 @@
   }
 
   .cn-command-group {
-    @apply text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2.5 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium;
+    @apply text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2.5 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium;
   }
 
   .cn-command-separator {
@@ -387,7 +387,7 @@
   }
 
   .cn-command-item {
-    @apply data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-xs/relaxed outline-hidden select-none [&_svg:not([class*='size-'])]:size-3.5 [[data-slot=dialog-content]_&]:rounded-md;
+    @apply data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex min-h-7 cursor-default items-center gap-2 rounded-md px-2.5 py-1.5 text-xs/relaxed outline-hidden select-none in-data-[slot=dialog-content]:rounded-md [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-command-shortcut {
@@ -404,15 +404,15 @@
   }
 
   .cn-context-menu-item {
-    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5;
+    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-context-menu-checkbox-item {
-    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-context-menu-radio-item {
-    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-context-menu-item-indicator {
@@ -420,7 +420,7 @@
   }
 
   .cn-context-menu-label {
-    @apply text-muted-foreground px-2 py-1.5 text-xs;
+    @apply text-muted-foreground px-2 py-1.5 text-xs data-inset:pl-7.5;
   }
 
   .cn-context-menu-separator {
@@ -432,7 +432,7 @@
   }
 
   .cn-context-menu-sub-trigger {
-    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5;
+    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-context-menu-sub-content {
@@ -511,15 +511,15 @@
   }
 
   .cn-dropdown-menu-item {
-    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed [&_svg:not([class*='size-'])]:size-3.5;
+    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-dropdown-menu-checkbox-item {
-    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-dropdown-menu-radio-item {
-    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs [&_svg:not([class*='size-'])]:size-3.5;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-8 pl-2 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-dropdown-menu-item-indicator {
@@ -527,7 +527,7 @@
   }
 
   .cn-dropdown-menu-label {
-    @apply text-muted-foreground px-2 py-1.5 text-xs;
+    @apply text-muted-foreground px-2 py-1.5 text-xs data-inset:pl-7.5;
   }
 
   .cn-dropdown-menu-separator {
@@ -539,7 +539,7 @@
   }
 
   .cn-dropdown-menu-sub-trigger {
-    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs [&_svg:not([class*='size-'])]:size-3.5;
+    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-dropdown-menu-sub-content {
@@ -593,7 +593,7 @@
   }
 
   .cn-field-group {
-    @apply gap-4 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4;
+    @apply gap-4 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4;
   }
 
   .cn-field {
@@ -605,7 +605,7 @@
   }
 
   .cn-field-label {
-    @apply has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2;
+    @apply has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-2;
   }
 
   .cn-field-title {
@@ -639,7 +639,7 @@
 
   /* MARK: Input */
   .cn-input {
-    @apply bg-input/20 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 rounded-md border px-2 py-0.5 text-sm transition-colors file:h-6 file:text-xs/relaxed file:font-medium focus-visible:ring-[2px] aria-invalid:ring-[2px] md:text-xs/relaxed;
+    @apply bg-input/20 dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 rounded-md border px-2 py-0.5 text-sm transition-colors file:h-6 file:text-xs/relaxed file:font-medium focus-visible:ring-2 aria-invalid:ring-2 md:text-xs/relaxed;
   }
 
   /* MARK: Input OTP */
@@ -648,11 +648,11 @@
   }
 
   .cn-input-otp-group {
-    @apply has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-[2px];
+    @apply has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-2;
   }
 
   .cn-input-otp-slot {
-    @apply bg-input/20 dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/30 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-7 border-y border-r text-xs/relaxed transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-[2px];
+    @apply bg-input/20 dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/30 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-7 border-y border-r text-xs/relaxed transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-2;
   }
 
   .cn-input-otp-caret-line {
@@ -689,11 +689,11 @@
   }
 
   .cn-item-size-xs {
-    @apply gap-2.5 px-2.5 py-2 [[data-slot=dropdown-menu-content]_&]:p-0;
+    @apply gap-2.5 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0;
   }
 
   .cn-item-media {
-    @apply gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start;
+    @apply gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start;
   }
 
   .cn-item-media-variant-default {
@@ -733,7 +733,7 @@
   }
 
   .cn-item-group {
-    @apply gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2;
+    @apply gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2;
   }
 
   .cn-item-separator {
@@ -742,7 +742,7 @@
 
   /* MARK: Kbd */
   .cn-kbd {
-    @apply bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-xs px-1 font-sans text-[0.625rem] font-medium [&_svg:not([class*='size-'])]:size-3;
+    @apply bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-xs px-1 font-sans text-[0.625rem] font-medium [&_svg:not([class*='size-'])]:size-3;
   }
 
   .cn-kbd-group {
@@ -772,11 +772,11 @@
   }
 
   .cn-menubar-item {
-    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-3.5;
+    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs/relaxed data-disabled:opacity-50 data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-menubar-checkbox-item {
-    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-8 text-xs data-disabled:opacity-50;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-7.5 text-xs data-disabled:opacity-50 data-inset:pl-7.5;
   }
 
   .cn-menubar-checkbox-item-indicator {
@@ -784,7 +784,7 @@
   }
 
   .cn-menubar-radio-item {
-    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-8 text-xs data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-3.5;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground min-h-7 gap-2 rounded-md py-1.5 pr-2 pl-7.5 text-xs data-disabled:opacity-50 data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-menubar-radio-item-indicator {
@@ -792,7 +792,7 @@
   }
 
   .cn-menubar-label {
-    @apply text-muted-foreground px-2 py-1.5 text-xs data-[inset]:pl-8;
+    @apply text-muted-foreground px-2 py-1.5 text-xs data-inset:pl-7.5;
   }
 
   .cn-menubar-separator {
@@ -804,7 +804,7 @@
   }
 
   .cn-menubar-sub-trigger {
-    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-3.5;
+    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground min-h-7 gap-2 rounded-md px-2 py-1 text-xs data-inset:pl-7.5 [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-menubar-sub-content {
@@ -821,11 +821,11 @@
   }
 
   .cn-navigation-menu-trigger {
-    @apply bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/30 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-2.5 py-1.5 text-xs/relaxed font-medium transition-all focus-visible:ring-[2px] focus-visible:outline-1 disabled:opacity-50;
+    @apply bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/30 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-2.5 py-1.5 text-xs/relaxed font-medium transition-all focus-visible:ring-2 focus-visible:outline-1 disabled:opacity-50;
   }
 
   .cn-navigation-menu-trigger-icon {
-    @apply relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180;
+    @apply relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180;
   }
 
   .cn-navigation-menu-content {
@@ -837,7 +837,7 @@
   }
 
   .cn-navigation-menu-link {
-    @apply data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/30 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-lg p-2 text-xs/relaxed transition-all outline-none focus-visible:ring-[2px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4;
+    @apply data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/30 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-lg p-2 text-xs/relaxed transition-all outline-none focus-visible:ring-2 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-navigation-menu-indicator {
@@ -853,12 +853,12 @@
   }
 
   .cn-navigation-menu-popup {
-    @apply bg-popover text-popover-foreground ring-foreground/10 rounded-xl shadow ring-1 transition-all 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;
+    @apply bg-popover text-popover-foreground ring-foreground/10 rounded-xl shadow ring-1 transition-all 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;
   }
 
   /* MARK: Native Select */
   .cn-native-select {
-    @apply border-input bg-input/20 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 w-full min-w-0 appearance-none rounded-md border py-0.5 pr-6 pl-2 text-xs/relaxed transition-colors select-none focus-visible:ring-[2px] aria-invalid:ring-[2px] data-[size=sm]:h-6 data-[size=sm]:text-[0.625rem];
+    @apply border-input bg-input/20 placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-7 w-full min-w-0 appearance-none rounded-md border py-0.5 pr-6 pl-2 text-xs/relaxed transition-colors select-none focus-visible:ring-2 aria-invalid:ring-2 data-[size=sm]:h-6 data-[size=sm]:text-[0.625rem];
   }
 
   .cn-native-select-icon {
@@ -930,7 +930,7 @@
   }
 
   .cn-radio-group-item {
-    @apply border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full transition-none focus-visible:ring-[2px] aria-invalid:ring-[2px];
+    @apply border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 data-checked:bg-primary data-checked:border-primary flex size-4 rounded-full transition-none focus-visible:ring-2 aria-invalid:ring-2;
   }
 
   .cn-radio-group-indicator {
@@ -957,7 +957,7 @@
 
   /* MARK: Select */
   .cn-select-trigger {
-    @apply border-input data-[placeholder]:text-muted-foreground bg-input/20 dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border px-2 py-1.5 text-xs/relaxed transition-colors focus-visible:ring-[2px] aria-invalid:ring-[2px] data-[size=default]:h-7 data-[size=sm]:h-6 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-3.5;
+    @apply border-input data-placeholder:text-muted-foreground bg-input/20 dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border px-2 py-1.5 text-xs/relaxed transition-colors focus-visible:ring-2 aria-invalid:ring-2 data-[size=default]:h-7 data-[size=sm]:h-6 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-select-value {
@@ -1190,7 +1190,7 @@
 
   /* MARK: Switch */
   .cn-switch {
-    @apply data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-[2px] aria-invalid:ring-[2px] data-[size=default]:h-[16.6px] data-[size=default]:w-[28px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px];
+    @apply data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-2 aria-invalid:ring-2 data-[size=default]:h-[16.6px] data-[size=default]:w-[28px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px];
   }
 
   .cn-switch-thumb {
@@ -1253,7 +1253,7 @@
 
   /* MARK: Textarea */
   .cn-textarea {
-    @apply border-input bg-input/20 dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 resize-none rounded-md border px-2 py-2 text-sm transition-colors focus-visible:ring-[2px] aria-invalid:ring-[2px] md:text-xs/relaxed;
+    @apply border-input bg-input/20 dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 resize-none rounded-md border px-2 py-2 text-sm transition-colors focus-visible:ring-2 aria-invalid:ring-2 md:text-xs/relaxed;
   }
 
   /* MARK: Toggle */
@@ -1300,7 +1300,7 @@
   }
 
   .cn-tooltip-arrow {
-    @apply size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px];
+    @apply size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px];
   }
 
   .cn-tooltip-arrow-logical {
@@ -1309,7 +1309,7 @@
 
   /* MARK: Input Group */
   .cn-input-group {
-    @apply border-input bg-input/20 dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-7 rounded-md border transition-colors has-data-[align=block-end]:rounded-md has-data-[align=block-start]:rounded-md has-[[data-slot=input-group-control]:focus-visible]:ring-[2px] has-[[data-slot][aria-invalid=true]]:ring-[2px] has-[textarea]:rounded-md 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0;
+    @apply border-input bg-input/20 dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/30 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-7 rounded-md border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-md has-data-[align=block-start]:rounded-md has-[[data-slot=input-group-control]:focus-visible]:ring-2 has-[[data-slot][aria-invalid=true]]:ring-2 has-[textarea]:rounded-md 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5;
   }
 
   .cn-input-group-addon {
diff --git a/apps/v4/registry/styles/style-nova.css b/apps/v4/registry/styles/style-nova.css
index c60cf10969..f164185126 100644
--- a/apps/v4/registry/styles/style-nova.css
+++ b/apps/v4/registry/styles/style-nova.css
@@ -5,7 +5,7 @@
   }
 
   .cn-accordion-trigger {
-    @apply focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
+    @apply focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-lg py-2.5 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
   }
 
   .cn-accordion-content {
@@ -147,7 +147,7 @@
 
   /* MARK: Button */
   .cn-button {
-    @apply focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4;
+    @apply focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-button-variant-default {
@@ -233,7 +233,7 @@
   }
 
   .cn-calendar-dropdown-root {
-    @apply has-focus:border-ring border-input has-focus:ring-ring/50 border has-focus:ring-[3px];
+    @apply has-focus:border-ring border-input has-focus:ring-ring/50 border has-focus:ring-3;
   }
 
   .cn-calendar-caption-label {
@@ -281,7 +281,7 @@
 
   /* MARK: Checkbox */
   .cn-checkbox {
-    @apply border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px];
+    @apply border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border transition-colors group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3;
   }
 
   .cn-checkbox-indicator {
@@ -334,7 +334,7 @@
   }
 
   .cn-combobox-chips {
-    @apply dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1;
+    @apply dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-8 flex-wrap items-center gap-1 rounded-lg border bg-transparent bg-clip-padding px-2.5 py-1 text-sm transition-colors focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1;
   }
 
   .cn-combobox-chip {
@@ -379,7 +379,7 @@
   }
 
   .cn-command-group {
-    @apply text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium;
+    @apply text-foreground **:[[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 **:[[cmdk-group-heading]]:px-2 **:[[cmdk-group-heading]]:py-1.5 **:[[cmdk-group-heading]]:text-xs **:[[cmdk-group-heading]]:font-medium;
   }
 
   .cn-command-separator {
@@ -387,7 +387,7 @@
   }
 
   .cn-command-item {
-    @apply data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-lg!;
+    @apply data-selected:bg-muted data-selected:text-foreground data-selected:*:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-command-shortcut {
@@ -404,15 +404,15 @@
   }
 
   .cn-context-menu-item {
-    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-context-menu-checkbox-item {
-    @apply focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-context-menu-radio-item {
-    @apply focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-context-menu-item-indicator {
@@ -420,7 +420,7 @@
   }
 
   .cn-context-menu-label {
-    @apply text-muted-foreground px-1.5 py-1 text-xs font-medium;
+    @apply text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7;
   }
 
   .cn-context-menu-separator {
@@ -432,7 +432,7 @@
   }
 
   .cn-context-menu-sub-trigger {
-    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-context-menu-sub-content {
@@ -511,15 +511,15 @@
   }
 
   .cn-dropdown-menu-item {
-    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-dropdown-menu-checkbox-item {
-    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-dropdown-menu-radio-item {
-    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-dropdown-menu-item-indicator {
@@ -527,7 +527,7 @@
   }
 
   .cn-dropdown-menu-label {
-    @apply text-muted-foreground px-1.5 py-1 text-xs font-medium;
+    @apply text-muted-foreground px-1.5 py-1 text-xs font-medium data-inset:pl-7;
   }
 
   .cn-dropdown-menu-separator {
@@ -539,7 +539,7 @@
   }
 
   .cn-dropdown-menu-sub-trigger {
-    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-dropdown-menu-sub-content {
@@ -593,7 +593,7 @@
   }
 
   .cn-field-group {
-    @apply gap-5 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4;
+    @apply gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4;
   }
 
   .cn-field {
@@ -605,7 +605,7 @@
   }
 
   .cn-field-label {
-    @apply has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2.5;
+    @apply has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5;
   }
 
   .cn-field-title {
@@ -639,7 +639,7 @@
 
   /* MARK: Input */
   .cn-input {
-    @apply dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm;
+    @apply dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm;
   }
 
   /* MARK: Input OTP */
@@ -648,11 +648,11 @@
   }
 
   .cn-input-otp-group {
-    @apply has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-lg has-aria-invalid:ring-[3px];
+    @apply has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-lg has-aria-invalid:ring-3;
   }
 
   .cn-input-otp-slot {
-    @apply dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:ring-[3px];
+    @apply dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-8 border-y border-r text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg data-[active=true]:ring-3;
   }
 
   .cn-input-otp-caret-line {
@@ -689,11 +689,11 @@
   }
 
   .cn-item-size-xs {
-    @apply gap-2 px-2.5 py-2 [[data-slot=dropdown-menu-content]_&]:p-0;
+    @apply gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0;
   }
 
   .cn-item-media {
-    @apply gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start;
+    @apply gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start;
   }
 
   .cn-item-media-variant-default {
@@ -733,7 +733,7 @@
   }
 
   .cn-item-group {
-    @apply gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2;
+    @apply gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2;
   }
 
   .cn-item-separator {
@@ -742,7 +742,7 @@
 
   /* MARK: Kbd */
   .cn-kbd {
-    @apply bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3;
+    @apply bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3;
   }
 
   .cn-kbd-group {
@@ -772,11 +772,11 @@
   }
 
   .cn-menubar-item {
-    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive! not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-menubar-checkbox-item {
-    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 data-inset:pl-7;
   }
 
   .cn-menubar-checkbox-item-indicator {
@@ -784,7 +784,7 @@
   }
 
   .cn-menubar-radio-item {
-    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-1.5 pl-7 text-sm data-disabled:opacity-50 data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-menubar-radio-item-indicator {
@@ -792,7 +792,7 @@
   }
 
   .cn-menubar-label {
-    @apply px-1.5 py-1 text-sm font-medium data-[inset]:pl-8;
+    @apply px-1.5 py-1 text-sm font-medium data-inset:pl-7;
   }
 
   .cn-menubar-separator {
@@ -804,7 +804,7 @@
   }
 
   .cn-menubar-sub-trigger {
-    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-menubar-sub-content {
@@ -821,15 +821,15 @@
   }
 
   .cn-navigation-menu-trigger {
-    @apply bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50;
+    @apply bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-lg px-2.5 py-1.5 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50;
   }
 
   .cn-navigation-menu-link {
-    @apply data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 [[data-slot=navigation-menu-content]_&]:rounded-md;
+    @apply data-active:focus:bg-muted data-active:hover:bg-muted data-active:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-2 rounded-lg p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-md [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-navigation-menu-trigger-icon {
-    @apply relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180;
+    @apply relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180;
   }
 
   .cn-navigation-menu-content {
@@ -853,12 +853,12 @@
   }
 
   .cn-navigation-menu-popup {
-    @apply bg-popover text-popover-foreground ring-foreground/10 rounded-lg shadow ring-1 transition-all 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;
+    @apply bg-popover text-popover-foreground ring-foreground/10 rounded-lg shadow ring-1 transition-all 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;
   }
 
   /* MARK: Native Select */
   .cn-native-select {
-    @apply border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5;
+    @apply border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-transparent py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5;
   }
 
   .cn-native-select-icon {
@@ -930,7 +930,7 @@
   }
 
   .cn-radio-group-item {
-    @apply border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-[3px] aria-invalid:ring-[3px];
+    @apply border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full focus-visible:ring-3 aria-invalid:ring-3;
   }
 
   .cn-radio-group-indicator {
@@ -957,7 +957,7 @@
 
   /* MARK: Select */
   .cn-select-trigger {
-    @apply border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4;
+    @apply border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-select-value {
@@ -1178,7 +1178,7 @@
   }
 
   .cn-slider-thumb {
-    @apply border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow] after:absolute after:-inset-2 hover:ring-[3px] focus-visible:ring-[3px] focus-visible:outline-hidden active:ring-[3px];
+    @apply border-ring ring-ring/50 relative size-3 rounded-full border bg-white transition-[color,box-shadow] after:absolute after:-inset-2 hover:ring-3 focus-visible:ring-3 focus-visible:outline-hidden active:ring-3;
   }
 
   /* MARK: Sonner */
@@ -1188,7 +1188,7 @@
 
   /* MARK: Switch */
   .cn-switch {
-    @apply data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px];
+    @apply data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px];
   }
 
   .cn-switch-thumb {
@@ -1251,7 +1251,7 @@
 
   /* MARK: Textarea */
   .cn-textarea {
-    @apply border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm;
+    @apply border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors focus-visible:ring-3 aria-invalid:ring-3 md:text-sm;
   }
 
   /* MARK: Toggle */
@@ -1298,7 +1298,7 @@
   }
 
   .cn-tooltip-arrow {
-    @apply size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px];
+    @apply size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px];
   }
 
   .cn-tooltip-arrow-logical {
@@ -1307,7 +1307,7 @@
 
   /* MARK: Input Group */
   .cn-input-group {
-    @apply border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0;
+    @apply border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-disabled:bg-input/50 dark:has-disabled:bg-input/80 h-8 rounded-lg border transition-colors in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5;
   }
 
   .cn-input-group-addon {
diff --git a/apps/v4/registry/styles/style-vega.css b/apps/v4/registry/styles/style-vega.css
index 7e08d4d7d2..f091240403 100644
--- a/apps/v4/registry/styles/style-vega.css
+++ b/apps/v4/registry/styles/style-vega.css
@@ -5,7 +5,7 @@
   }
 
   .cn-accordion-trigger {
-    @apply focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-[3px] **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
+    @apply focus-visible:ring-ring/50 focus-visible:border-ring focus-visible:after:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-md py-4 text-left text-sm font-medium hover:underline focus-visible:ring-3 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
   }
 
   .cn-accordion-content {
@@ -143,7 +143,7 @@
 
   /* MARK: Button */
   .cn-button {
-    @apply focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] [&_svg:not([class*='size-'])]:size-4;
+    @apply focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-button-variant-default {
@@ -229,7 +229,7 @@
   }
 
   .cn-calendar-dropdown-root {
-    @apply has-focus:border-ring border-input has-focus:ring-ring/50 border shadow-xs has-focus:ring-[3px];
+    @apply has-focus:border-ring border-input has-focus:ring-ring/50 border shadow-xs has-focus:ring-3;
   }
 
   .cn-calendar-caption-label {
@@ -277,7 +277,7 @@
 
   /* MARK: Checkbox */
   .cn-checkbox {
-    @apply border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border shadow-xs transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px];
+    @apply border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[4px] border shadow-xs transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-3 aria-invalid:ring-3;
   }
 
   .cn-checkbox-indicator {
@@ -330,7 +330,7 @@
   }
 
   .cn-combobox-chips {
-    @apply dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-[3px] has-aria-invalid:ring-[3px] has-data-[slot=combobox-chip]:px-1.5;
+    @apply dark:bg-input/30 border-input focus-within:border-ring focus-within:ring-ring/50 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive dark:has-aria-invalid:border-destructive/50 flex min-h-9 flex-wrap items-center gap-1.5 rounded-md border bg-transparent bg-clip-padding px-2.5 py-1.5 text-sm shadow-xs transition-[color,box-shadow] focus-within:ring-3 has-aria-invalid:ring-3 has-data-[slot=combobox-chip]:px-1.5;
   }
 
   .cn-combobox-chip {
@@ -383,7 +383,7 @@
   }
 
   .cn-command-item {
-    @apply data-selected:bg-muted data-selected:text-foreground data-selected:**:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none [&_svg:not([class*='size-'])]:size-4 [[data-slot=dialog-content]_&]:rounded-lg!;
+    @apply data-selected:bg-muted data-selected:text-foreground data-selected:**:[svg]:text-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-lg! [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-command-shortcut {
@@ -400,15 +400,15 @@
   }
 
   .cn-context-menu-item {
-    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-context-menu-checkbox-item {
-    @apply focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-context-menu-radio-item {
-    @apply focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-context-menu-item-indicator {
@@ -416,7 +416,7 @@
   }
 
   .cn-context-menu-label {
-    @apply text-muted-foreground px-2 py-1.5 text-xs font-medium;
+    @apply text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8;
   }
 
   .cn-context-menu-separator {
@@ -428,7 +428,7 @@
   }
 
   .cn-context-menu-sub-trigger {
-    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-context-menu-sub-content {
@@ -507,15 +507,15 @@
   }
 
   .cn-dropdown-menu-item {
-    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-dropdown-menu-checkbox-item {
-    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-dropdown-menu-radio-item {
-    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-dropdown-menu-item-indicator {
@@ -523,7 +523,7 @@
   }
 
   .cn-dropdown-menu-label {
-    @apply text-muted-foreground px-2 py-1.5 text-xs font-medium;
+    @apply text-muted-foreground px-2 py-1.5 text-xs font-medium data-inset:pl-8;
   }
 
   .cn-dropdown-menu-separator {
@@ -535,7 +535,7 @@
   }
 
   .cn-dropdown-menu-sub-trigger {
-    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-dropdown-menu-sub-content {
@@ -601,7 +601,7 @@
   }
 
   .cn-field-label {
-    @apply has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-3;
+    @apply has-data-checked:bg-primary/5 has-data-checked:border-primary/30 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border *:data-[slot=field]:p-3;
   }
 
   .cn-field-title {
@@ -635,7 +635,7 @@
 
   /* MARK: Input */
   .cn-input {
-    @apply dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm;
+    @apply dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 rounded-md border bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] file:h-7 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm;
   }
 
   /* MARK: Input OTP */
@@ -644,11 +644,11 @@
   }
 
   .cn-input-otp-group {
-    @apply has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-[3px];
+    @apply has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40 has-aria-invalid:border-destructive rounded-md has-aria-invalid:ring-3;
   }
 
   .cn-input-otp-slot {
-    @apply dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-9 border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-[3px];
+    @apply dark:bg-input/30 border-input data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive size-9 border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:ring-3;
   }
 
   .cn-input-otp-caret-line {
@@ -685,11 +685,11 @@
   }
 
   .cn-item-size-xs {
-    @apply gap-2 px-2.5 py-2 [[data-slot=dropdown-menu-content]_&]:p-0;
+    @apply gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0;
   }
 
   .cn-item-media {
-    @apply gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start;
+    @apply gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start;
   }
 
   .cn-item-media-variant-default {
@@ -729,7 +729,7 @@
   }
 
   .cn-item-group {
-    @apply gap-4 has-[[data-size=sm]]:gap-2.5 has-[[data-size=xs]]:gap-2;
+    @apply gap-4 has-data-[size=sm]:gap-2.5 has-data-[size=xs]:gap-2;
   }
 
   .cn-item-separator {
@@ -738,7 +738,7 @@
 
   /* MARK: Kbd */
   .cn-kbd {
-    @apply bg-muted text-muted-foreground [[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3;
+    @apply bg-muted text-muted-foreground in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 h-5 w-fit min-w-5 gap-1 rounded-sm px-1 font-sans text-xs font-medium [&_svg:not([class*='size-'])]:size-3;
   }
 
   .cn-kbd-group {
@@ -768,11 +768,11 @@
   }
 
   .cn-menubar-item {
-    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-disabled:opacity-50 data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-menubar-checkbox-item {
-    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm data-disabled:opacity-50;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm data-disabled:opacity-50 data-inset:pl-8;
   }
 
   .cn-menubar-checkbox-item-indicator {
@@ -780,7 +780,7 @@
   }
 
   .cn-menubar-radio-item {
-    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2 rounded-md py-1.5 pr-2 pl-8 text-sm data-disabled:opacity-50 data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-menubar-radio-item-indicator {
@@ -788,7 +788,7 @@
   }
 
   .cn-menubar-label {
-    @apply px-2 py-1.5 text-sm font-medium data-[inset]:pl-8;
+    @apply px-2 py-1.5 text-sm font-medium data-inset:pl-8;
   }
 
   .cn-menubar-separator {
@@ -800,7 +800,7 @@
   }
 
   .cn-menubar-sub-trigger {
-    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-[inset]:pl-8 [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground gap-2 rounded-sm px-2 py-1.5 text-sm data-inset:pl-8 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-menubar-sub-content {
@@ -817,11 +817,11 @@
   }
 
   .cn-navigation-menu-trigger {
-    @apply bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-4 py-2 text-sm font-medium transition-all focus-visible:ring-[3px] focus-visible:outline-1 disabled:opacity-50;
+    @apply bg-background hover:bg-muted focus:bg-muted data-open:hover:bg-muted data-open:focus:bg-muted data-open:bg-muted/50 focus-visible:ring-ring/50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted rounded-md px-4 py-2 text-sm font-medium transition-all focus-visible:ring-3 focus-visible:outline-1 disabled:opacity-50;
   }
 
   .cn-navigation-menu-trigger-icon {
-    @apply relative top-[1px] ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180;
+    @apply relative top-px ml-1 size-3 transition duration-300 group-data-open/navigation-menu-trigger:rotate-180 group-data-popup-open/navigation-menu-trigger:rotate-180;
   }
 
   .cn-navigation-menu-content {
@@ -833,7 +833,7 @@
   }
 
   .cn-navigation-menu-link {
-    @apply data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4;
+    @apply data-[active=true]:focus:bg-muted data-[active=true]:hover:bg-muted data-[active=true]:bg-muted/50 focus-visible:ring-ring/50 hover:bg-muted focus:bg-muted flex items-center gap-1.5 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-3 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-navigation-menu-indicator {
@@ -849,12 +849,12 @@
   }
 
   .cn-navigation-menu-popup {
-    @apply bg-popover text-popover-foreground ring-foreground/10 rounded-lg shadow ring-1 transition-all 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;
+    @apply bg-popover text-popover-foreground ring-foreground/10 rounded-lg shadow ring-1 transition-all 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;
   }
 
   /* MARK: Native Select */
   .cn-native-select {
-    @apply border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] select-none focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=sm]:h-8;
+    @apply border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent py-1 pr-8 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-8;
   }
 
   .cn-native-select-icon {
@@ -926,7 +926,7 @@
   }
 
   .cn-radio-group-item {
-    @apply border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full shadow-xs focus-visible:ring-[3px] aria-invalid:ring-[3px];
+    @apply border-input text-primary dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex size-4 rounded-full shadow-xs focus-visible:ring-3 aria-invalid:ring-3;
   }
 
   .cn-radio-group-indicator {
@@ -953,7 +953,7 @@
 
   /* MARK: Select */
   .cn-select-trigger {
-    @apply border-input data-[placeholder]:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4;
+    @apply border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4;
   }
 
   .cn-select-value {
@@ -1184,7 +1184,7 @@
 
   /* MARK: Switch */
   .cn-switch {
-    @apply data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent shadow-xs focus-visible:ring-[3px] aria-invalid:ring-[3px] data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px];
+    @apply data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent shadow-xs focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px];
   }
 
   .cn-switch-thumb {
@@ -1247,7 +1247,7 @@
 
   /* MARK: Textarea */
   .cn-textarea {
-    @apply border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:ring-[3px] md:text-sm;
+    @apply border-input dark:bg-input/30 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-md border bg-transparent px-2.5 py-2 text-base shadow-xs transition-[color,box-shadow] focus-visible:ring-3 aria-invalid:ring-3 md:text-sm;
   }
 
   /* MARK: Toggle */
@@ -1294,7 +1294,7 @@
   }
 
   .cn-tooltip-arrow {
-    @apply size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px];
+    @apply size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px];
   }
 
   .cn-tooltip-arrow-logical {
@@ -1303,7 +1303,7 @@
 
   /* MARK: Input Group */
   .cn-input-group {
-    @apply border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-md border shadow-xs transition-[color,box-shadow] has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot][aria-invalid=true]]:ring-[3px] 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5 [[data-slot=combobox-content]_&]:focus-within:border-inherit [[data-slot=combobox-content]_&]:focus-within:ring-0;
+    @apply border-input dark:bg-input/30 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 h-9 rounded-md border shadow-xs transition-[color,box-shadow] in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-3 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-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5;
   }
 
   .cn-input-group-addon {