From dd4b5c287cbb5d6ca960b2d889c247624223d87f Mon Sep 17 00:00:00 2001
From: shadcn <m@shadcn.com>
Date: Mon, 13 Apr 2026 17:15:11 +0400
Subject: [PATCH] fix

---
 .../sera/components/theme-switcher.tsx        |  22 +-
 apps/v4/app/(app)/(styles)/sera/page.tsx      |   4 -
 .../components/article-directory.tsx          | 382 +++++++-----------
 .../preview-02/components/preview-header.tsx  |  82 ++--
 .../(app)/(styles)/sera/preview-02/index.tsx  |   7 +-
 .../components/editor-workspace.tsx           | 376 +++++++++++------
 .../preview-03/components/preview-header.tsx  |  68 ++--
 .../(app)/(styles)/sera/preview-03/index.tsx  |   7 +-
 .../components/publication-issues.tsx         | 190 ---------
 .../(app)/(styles)/sera/preview-04/index.tsx  |  11 -
 .../components/editorial-pipeline-board.tsx   | 280 -------------
 .../(app)/(styles)/sera/preview-05/index.tsx  |  11 -
 .../base-luma/dropdown-menu-example.json      |   2 +-
 .../r/styles/base-luma/field-example.json     |   2 +-
 .../r/styles/base-luma/select-example.json    |   2 +-
 .../r/styles/base-luma/switch-example.json    |   2 +-
 .../base-lyra/dropdown-menu-example.json      |   2 +-
 .../r/styles/base-lyra/field-example.json     |   2 +-
 .../r/styles/base-lyra/select-example.json    |   2 +-
 .../r/styles/base-lyra/switch-example.json    |   2 +-
 .../base-maia/dropdown-menu-example.json      |   2 +-
 .../r/styles/base-maia/field-example.json     |   2 +-
 .../r/styles/base-maia/select-example.json    |   2 +-
 .../r/styles/base-maia/switch-example.json    |   2 +-
 .../base-mira/dropdown-menu-example.json      |   2 +-
 .../r/styles/base-mira/field-example.json     |   2 +-
 .../r/styles/base-mira/select-example.json    |   2 +-
 .../r/styles/base-mira/switch-example.json    |   2 +-
 .../base-nova/dropdown-menu-example.json      |   2 +-
 .../r/styles/base-nova/field-example.json     |   2 +-
 .../r/styles/base-nova/select-example.json    |   2 +-
 .../r/styles/base-nova/switch-example.json    |   2 +-
 .../public/r/styles/base-sera/accordion.json  |   2 +-
 .../public/r/styles/base-sera/breadcrumb.json |   2 +-
 .../r/styles/base-sera/button-group.json      |   2 +-
 apps/v4/public/r/styles/base-sera/button.json |   2 +-
 .../public/r/styles/base-sera/combobox.json   |   2 +-
 .../v4/public/r/styles/base-sera/command.json |   2 +-
 .../r/styles/base-sera/context-menu.json      |   2 +-
 .../base-sera/dropdown-menu-example.json      |   2 +-
 .../r/styles/base-sera/dropdown-menu.json     |   2 +-
 .../r/styles/base-sera/field-example.json     |   2 +-
 apps/v4/public/r/styles/base-sera/field.json  |   2 +-
 .../r/styles/base-sera/input-group.json       |   2 +-
 .../public/r/styles/base-sera/input-otp.json  |   2 +-
 apps/v4/public/r/styles/base-sera/label.json  |   2 +-
 .../v4/public/r/styles/base-sera/menubar.json |   2 +-
 .../r/styles/base-sera/native-select.json     |   2 +-
 .../r/styles/base-sera/navigation-menu.json   |   2 +-
 .../r/styles/base-sera/select-example.json    |   2 +-
 apps/v4/public/r/styles/base-sera/select.json |   2 +-
 .../v4/public/r/styles/base-sera/sidebar.json |   2 +-
 .../r/styles/base-sera/switch-example.json    |   2 +-
 apps/v4/public/r/styles/base-sera/tabs.json   |   2 +-
 apps/v4/public/r/styles/base-sera/toggle.json |   2 +-
 .../base-vega/dropdown-menu-example.json      |   2 +-
 .../r/styles/base-vega/field-example.json     |   2 +-
 .../r/styles/base-vega/select-example.json    |   2 +-
 .../r/styles/base-vega/switch-example.json    |   2 +-
 .../radix-luma/dropdown-menu-example.json     |   2 +-
 .../r/styles/radix-luma/field-example.json    |   2 +-
 .../r/styles/radix-luma/select-example.json   |   2 +-
 .../r/styles/radix-luma/switch-example.json   |   2 +-
 .../radix-lyra/dropdown-menu-example.json     |   2 +-
 .../r/styles/radix-lyra/field-example.json    |   2 +-
 .../r/styles/radix-lyra/select-example.json   |   2 +-
 .../r/styles/radix-lyra/switch-example.json   |   2 +-
 .../radix-maia/dropdown-menu-example.json     |   2 +-
 .../r/styles/radix-maia/field-example.json    |   2 +-
 .../r/styles/radix-maia/select-example.json   |   2 +-
 .../r/styles/radix-maia/switch-example.json   |   2 +-
 .../radix-mira/dropdown-menu-example.json     |   2 +-
 .../r/styles/radix-mira/field-example.json    |   2 +-
 .../r/styles/radix-mira/select-example.json   |   2 +-
 .../r/styles/radix-mira/switch-example.json   |   2 +-
 .../radix-nova/dropdown-menu-example.json     |   2 +-
 .../r/styles/radix-nova/field-example.json    |   2 +-
 .../r/styles/radix-nova/select-example.json   |   2 +-
 .../r/styles/radix-nova/switch-example.json   |   2 +-
 .../public/r/styles/radix-sera/accordion.json |   2 +-
 .../r/styles/radix-sera/breadcrumb.json       |   2 +-
 .../r/styles/radix-sera/button-group.json     |   2 +-
 .../v4/public/r/styles/radix-sera/button.json |   2 +-
 .../public/r/styles/radix-sera/combobox.json  |   2 +-
 .../public/r/styles/radix-sera/command.json   |   2 +-
 .../r/styles/radix-sera/context-menu.json     |   2 +-
 .../radix-sera/dropdown-menu-example.json     |   2 +-
 .../r/styles/radix-sera/dropdown-menu.json    |   2 +-
 .../r/styles/radix-sera/field-example.json    |   2 +-
 apps/v4/public/r/styles/radix-sera/field.json |   2 +-
 .../r/styles/radix-sera/input-group.json      |   2 +-
 .../public/r/styles/radix-sera/input-otp.json |   2 +-
 apps/v4/public/r/styles/radix-sera/label.json |   2 +-
 .../public/r/styles/radix-sera/menubar.json   |   2 +-
 .../r/styles/radix-sera/native-select.json    |   2 +-
 .../r/styles/radix-sera/navigation-menu.json  |   2 +-
 .../r/styles/radix-sera/select-example.json   |   2 +-
 .../v4/public/r/styles/radix-sera/select.json |   2 +-
 .../public/r/styles/radix-sera/sidebar.json   |   2 +-
 .../r/styles/radix-sera/switch-example.json   |   2 +-
 apps/v4/public/r/styles/radix-sera/tabs.json  |   2 +-
 .../v4/public/r/styles/radix-sera/toggle.json |   2 +-
 .../radix-vega/dropdown-menu-example.json     |   2 +-
 .../r/styles/radix-vega/field-example.json    |   2 +-
 .../r/styles/radix-vega/select-example.json   |   2 +-
 .../r/styles/radix-vega/switch-example.json   |   2 +-
 .../base/examples/dropdown-menu-example.tsx   |   2 +-
 .../bases/base/examples/field-example.tsx     |  72 +---
 .../bases/base/examples/select-example.tsx    |   6 +-
 .../bases/base/examples/switch-example.tsx    |   1 +
 .../radix/examples/dropdown-menu-example.tsx  |   2 +-
 .../bases/radix/examples/field-example.tsx    |  72 +---
 .../bases/radix/examples/select-example.tsx   |   6 +-
 .../bases/radix/examples/switch-example.tsx   |   1 +
 apps/v4/registry/styles/style-sera.css        |  84 ++--
 apps/v4/styles/base-sera/ui/accordion.tsx     |   2 +-
 apps/v4/styles/base-sera/ui/breadcrumb.tsx    |   2 +-
 apps/v4/styles/base-sera/ui/button-group.tsx  |   2 +-
 apps/v4/styles/base-sera/ui/button.tsx        |   2 +-
 apps/v4/styles/base-sera/ui/combobox.tsx      |   8 +-
 apps/v4/styles/base-sera/ui/command.tsx       |   4 +-
 apps/v4/styles/base-sera/ui/context-menu.tsx  |   8 +-
 apps/v4/styles/base-sera/ui/dropdown-menu.tsx |   8 +-
 apps/v4/styles/base-sera/ui/field.tsx         |   2 +-
 apps/v4/styles/base-sera/ui/input-group.tsx   |   4 +-
 apps/v4/styles/base-sera/ui/input-otp.tsx     |   2 +-
 apps/v4/styles/base-sera/ui/label.tsx         |   2 +-
 apps/v4/styles/base-sera/ui/menubar.tsx       |   8 +-
 apps/v4/styles/base-sera/ui/native-select.tsx |   2 +-
 .../styles/base-sera/ui/navigation-menu.tsx   |   2 +-
 apps/v4/styles/base-sera/ui/select.tsx        |  12 +-
 apps/v4/styles/base-sera/ui/sidebar.tsx       |  10 +-
 apps/v4/styles/base-sera/ui/tabs.tsx          |   2 +-
 apps/v4/styles/base-sera/ui/toggle.tsx        |   2 +-
 apps/v4/styles/radix-sera/ui/accordion.tsx    |   2 +-
 apps/v4/styles/radix-sera/ui/breadcrumb.tsx   |   2 +-
 apps/v4/styles/radix-sera/ui/button-group.tsx |   2 +-
 apps/v4/styles/radix-sera/ui/button.tsx       |   2 +-
 apps/v4/styles/radix-sera/ui/combobox.tsx     |   8 +-
 apps/v4/styles/radix-sera/ui/command.tsx      |   4 +-
 apps/v4/styles/radix-sera/ui/context-menu.tsx |   8 +-
 .../v4/styles/radix-sera/ui/dropdown-menu.tsx |   8 +-
 apps/v4/styles/radix-sera/ui/field.tsx        |   2 +-
 apps/v4/styles/radix-sera/ui/input-group.tsx  |   4 +-
 apps/v4/styles/radix-sera/ui/input-otp.tsx    |   2 +-
 apps/v4/styles/radix-sera/ui/label.tsx        |   2 +-
 apps/v4/styles/radix-sera/ui/menubar.tsx      |   8 +-
 .../v4/styles/radix-sera/ui/native-select.tsx |   2 +-
 .../styles/radix-sera/ui/navigation-menu.tsx  |   2 +-
 apps/v4/styles/radix-sera/ui/select.tsx       |  12 +-
 apps/v4/styles/radix-sera/ui/sidebar.tsx      |  10 +-
 apps/v4/styles/radix-sera/ui/tabs.tsx         |   2 +-
 apps/v4/styles/radix-sera/ui/toggle.tsx       |   2 +-
 153 files changed, 748 insertions(+), 1294 deletions(-)
 delete mode 100644 apps/v4/app/(app)/(styles)/sera/preview-04/components/publication-issues.tsx
 delete mode 100644 apps/v4/app/(app)/(styles)/sera/preview-04/index.tsx
 delete mode 100644 apps/v4/app/(app)/(styles)/sera/preview-05/components/editorial-pipeline-board.tsx
 delete mode 100644 apps/v4/app/(app)/(styles)/sera/preview-05/index.tsx

diff --git a/apps/v4/app/(app)/(styles)/sera/components/theme-switcher.tsx b/apps/v4/app/(app)/(styles)/sera/components/theme-switcher.tsx
index 7a297c5da7..8fd9f76509 100644
--- a/apps/v4/app/(app)/(styles)/sera/components/theme-switcher.tsx
+++ b/apps/v4/app/(app)/(styles)/sera/components/theme-switcher.tsx
@@ -2,7 +2,7 @@
 
 import * as React from "react"
 
-import { Button } from "@/registry/new-york-v4/ui/button"
+import { cn } from "@/lib/utils"
 
 const THEME_OPTIONS = [
   { label: "Taupe", value: "theme-taupe" },
@@ -54,21 +54,25 @@ export function ThemeSwitcher() {
   }, [theme])
 
   return (
-    <div className="dark fixed inset-x-0 bottom-4 z-50 flex justify-center px-4">
-      <div className="w-full max-w-fit rounded-full border bg-background/80 p-2 shadow-lg backdrop-blur supports-backdrop-filter:bg-background/50">
-        <div className="no-scrollbar flex snap-x snap-mandatory items-center gap-2 overflow-x-auto">
+    <div className="fixed inset-x-0 bottom-4 z-50 flex justify-center px-4">
+      <div className="w-full max-w-fit rounded-full border-0 bg-neutral-950/80 p-1.5 text-neutral-100 shadow-lg ring-1 ring-neutral-950/80 backdrop-blur-xl dark:bg-neutral-800/90 dark:ring-neutral-700/50">
+        <div className="no-scrollbar flex snap-x snap-mandatory items-center gap-1 overflow-x-auto">
           {THEME_OPTIONS.map((option) => (
-            <Button
+            <button
               key={option.value}
-              variant={theme === option.value ? "default" : "ghost"}
-              size="sm"
+              type="button"
               onClick={() => {
                 setTheme(option.value)
               }}
-              className="snap-center rounded-full text-white data-[variant=default]:text-black"
+              className={cn(
+                "shrink-0 snap-center rounded-full px-3 py-1.5 text-sm font-medium outline-hidden select-none",
+                theme === option.value
+                  ? "bg-neutral-600 text-neutral-100 dark:bg-neutral-700/80"
+                  : "text-neutral-400 hover:bg-neutral-600 hover:text-neutral-100 dark:hover:bg-neutral-700/80"
+              )}
             >
               {option.label}
-            </Button>
+            </button>
           ))}
         </div>
       </div>
diff --git a/apps/v4/app/(app)/(styles)/sera/page.tsx b/apps/v4/app/(app)/(styles)/sera/page.tsx
index 28796e9b77..9896e62a1e 100644
--- a/apps/v4/app/(app)/(styles)/sera/page.tsx
+++ b/apps/v4/app/(app)/(styles)/sera/page.tsx
@@ -13,8 +13,6 @@ import { ThemeSwitcher } from "./components/theme-switcher"
 import { Preview01 } from "./preview-01"
 import { Preview02 } from "./preview-02"
 import { Preview03 } from "./preview-03"
-import { Preview04 } from "./preview-04"
-import { Preview05 } from "./preview-05"
 
 import "./style.css"
 
@@ -66,8 +64,6 @@ export default function SeraPage() {
           <Preview01 />
           <Preview02 />
           <Preview03 />
-          <Preview04 />
-          <Preview05 />
         </div>
       </div>
       <ThemeSwitcher />
diff --git a/apps/v4/app/(app)/(styles)/sera/preview-02/components/article-directory.tsx b/apps/v4/app/(app)/(styles)/sera/preview-02/components/article-directory.tsx
index 94f3da8db9..ec3cc7882a 100644
--- a/apps/v4/app/(app)/(styles)/sera/preview-02/components/article-directory.tsx
+++ b/apps/v4/app/(app)/(styles)/sera/preview-02/components/article-directory.tsx
@@ -1,10 +1,27 @@
 "use client"
 
-import * as React from "react"
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react"
+import { ChevronLeftIcon, ChevronRightIcon, SearchIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import { Button } from "@/styles/base-sera/ui/button"
+import { Badge } from "@/styles/base-sera/ui/badge"
+import {
+  Card,
+  CardContent,
+  CardFooter,
+  CardHeader,
+} from "@/styles/base-sera/ui/card"
+import {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupInput,
+} from "@/styles/base-sera/ui/input-group"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+} from "@/styles/base-sera/ui/pagination"
+import { Progress, ProgressValue } from "@/styles/base-sera/ui/progress"
 import {
   Table,
   TableBody,
@@ -14,20 +31,7 @@ import {
   TableRow,
 } from "@/styles/base-sera/ui/table"
 
-type ArticleStatus = "in-revision" | "final-edit" | "drafting" | "published"
-
-type ArticleRow = {
-  title: string
-  wordProgress: string
-  author: string
-  issue: string
-  status: ArticleStatus
-  statusLabel: string
-  progress: number
-  progressClassName: string
-}
-
-const ARTICLE_ROWS: ArticleRow[] = [
+const ARTICLE_ROWS = [
   {
     title: "The Future of Sustainable Architecture",
     wordProgress: "1.4k / 2.6k words",
@@ -36,7 +40,6 @@ const ARTICLE_ROWS: ArticleRow[] = [
     status: "in-revision",
     statusLabel: "In revision",
     progress: 45,
-    progressClassName: "w-[45%]",
   },
   {
     title: "Brutalism's Second Act",
@@ -46,7 +49,6 @@ const ARTICLE_ROWS: ArticleRow[] = [
     status: "final-edit",
     statusLabel: "Final edit",
     progress: 90,
-    progressClassName: "w-[90%]",
   },
   {
     title: "The Typography of Public Spaces",
@@ -56,7 +58,6 @@ const ARTICLE_ROWS: ArticleRow[] = [
     status: "drafting",
     statusLabel: "Drafting",
     progress: 20,
-    progressClassName: "w-[20%]",
   },
   {
     title: "Rethinking Urban Canopies",
@@ -66,231 +67,150 @@ const ARTICLE_ROWS: ArticleRow[] = [
     status: "published",
     statusLabel: "Published",
     progress: 100,
-    progressClassName: "w-full",
   },
-]
+  {
+    title: "Light, Glass, and the Modern Museum",
+    wordProgress: "1.2k / 2.0k words",
+    author: "Amara Osei",
+    issue: "Autumn 2024",
+    status: "in-revision",
+    statusLabel: "In revision",
+    progress: 55,
+  },
+  {
+    title: "Concrete Utopias: Housing in the 21st Century",
+    wordProgress: "3.0k / 3.0k words",
+    author: "Tomás Herrera",
+    issue: "Summer 2024",
+    status: "published",
+    statusLabel: "Published",
+    progress: 100,
+  },
+  {
+    title: "Designing for Silence",
+    wordProgress: "0.8k / 2.2k words",
+    author: "Ingrid Solberg",
+    issue: "Winter 2024",
+    status: "drafting",
+    statusLabel: "Drafting",
+    progress: 30,
+  },
+  {
+    title: "The Invisible Infrastructure of Cities",
+    wordProgress: "2.4k / 2.8k words",
+    author: "James Whitfield",
+    issue: "Autumn 2024",
+    status: "final-edit",
+    statusLabel: "Final edit",
+    progress: 85,
+  },
+] as const
 
-function getStatusClasses(status: ArticleStatus): {
-  dotClassName: string
-  textClassName: string
-} {
-  if (status === "in-revision") {
-    return {
-      dotClassName: "bg-amber-600/75",
-      textClassName: "text-amber-700 dark:text-amber-300",
-    }
-  }
+const STATUS_BADGE_VARIANT = {
+  "in-revision": "outline",
+  "final-edit": "default",
+  drafting: "ghost",
+  published: "secondary",
+} as const
 
-  if (status === "final-edit") {
-    return {
-      dotClassName: "bg-foreground/90",
-      textClassName: "text-foreground",
-    }
-  }
-
-  if (status === "drafting") {
-    return {
-      dotClassName: "bg-muted-foreground/70",
-      textClassName: "text-muted-foreground",
-    }
-  }
-
-  return {
-    dotClassName: "bg-muted-foreground/80",
-    textClassName: "text-muted-foreground",
-  }
-}
-
-function PaginationButton({
-  children,
-  active = false,
-}: {
-  children: React.ReactNode
-  active?: boolean
-}) {
-  return (
-    <Button
-      size="icon-sm"
-      variant={active ? "default" : "ghost"}
-      className={cn(
-        "size-8 border text-[11px] tracking-[0.12em]",
-        active
-          ? "border-foreground bg-foreground text-background hover:bg-foreground/90"
-          : "border-transparent text-muted-foreground hover:border-border hover:bg-transparent hover:text-foreground"
-      )}
-    >
-      {children}
-    </Button>
-  )
+const STATUS_DOT_CLASSNAME = {
+  "in-revision": "bg-amber-600/80",
+  "final-edit": "bg-foreground/90",
+  drafting: "bg-muted-foreground/60",
+  published: "bg-emerald-600/80",
 }
 
 export function ArticleDirectory() {
   return (
-    <section className="flex min-h-[860px] flex-col border border-border/70 bg-background">
-      <div className="flex flex-col gap-3 p-4 md:hidden">
-        {ARTICLE_ROWS.map((row) => {
-          const statusClasses = getStatusClasses(row.status)
-
-          return (
-            <article key={row.title} className="flex flex-col gap-3 border border-border/70 p-4">
-              <div className="flex flex-col gap-1">
-                <h2 className="font-heading text-xl leading-tight tracking-tight">{row.title}</h2>
-                <p className="text-xs text-muted-foreground">{row.wordProgress}</p>
-              </div>
-
-              <div className="grid grid-cols-2 gap-x-4 gap-y-2 text-xs">
-                <div className="flex flex-col gap-1">
-                  <span className="text-[10px] font-semibold tracking-[0.16em] text-muted-foreground uppercase">
-                    Author
-                  </span>
-                  <span>{row.author}</span>
-                </div>
-                <div className="flex flex-col gap-1">
-                  <span className="text-[10px] font-semibold tracking-[0.16em] text-muted-foreground uppercase">
-                    Issue
-                  </span>
-                  <span>{row.issue}</span>
-                </div>
-              </div>
-
-              <div className="flex items-center justify-between gap-3">
-                <div
-                  className={cn(
-                    "flex items-center gap-1.5 text-[10px] font-semibold tracking-[0.16em] uppercase",
-                    statusClasses.textClassName
-                  )}
-                >
-                  <span className={cn("size-1.5 rounded-full", statusClasses.dotClassName)} />
-                  <span>{row.statusLabel}</span>
-                </div>
-                <span className="text-xs font-medium">{row.progress}%</span>
-              </div>
-
-              <div className="relative h-px w-full bg-border">
-                <div
-                  className={cn(
-                    "absolute inset-y-0 left-0 bg-foreground",
-                    row.progressClassName
-                  )}
-                />
-              </div>
-            </article>
-          )
-        })}
-
-        <footer className="flex items-center justify-between gap-4 border border-border/70 p-4">
-          <p className="text-[10px] font-semibold tracking-[0.16em] text-muted-foreground uppercase">
-            Showing 4 of 24
-          </p>
-          <div className="flex items-center gap-1">
-            <PaginationButton>
-              <ChevronLeftIcon className="size-3.5" />
-            </PaginationButton>
-            <PaginationButton active>1</PaginationButton>
-            <PaginationButton>2</PaginationButton>
-            <PaginationButton>3</PaginationButton>
-            <PaginationButton>
-              <ChevronRightIcon className="size-3.5" />
-            </PaginationButton>
-          </div>
-        </footer>
-      </div>
-
-      <div className="hidden min-h-[860px] md:flex md:flex-col">
+    <Card>
+      <CardHeader>
+        <InputGroup>
+          <InputGroupAddon>
+            <SearchIcon />
+          </InputGroupAddon>
+          <InputGroupInput type="search" placeholder="Search articles..." />
+        </InputGroup>
+      </CardHeader>
+      <CardContent>
         <Table>
-          <TableHeader className="[&_tr]:border-border/70">
-            <TableRow className="h-12 hover:bg-transparent">
-              <TableHead className="px-6 text-[10px] font-semibold tracking-[0.18em] text-muted-foreground uppercase">
-                Title
-              </TableHead>
-              <TableHead className="w-[170px] px-3 text-[10px] font-semibold tracking-[0.18em] text-muted-foreground uppercase">
-                Author
-              </TableHead>
-              <TableHead className="w-[150px] px-3 text-[10px] font-semibold tracking-[0.18em] text-muted-foreground uppercase">
-                Issue
-              </TableHead>
-              <TableHead className="w-[180px] px-3 text-[10px] font-semibold tracking-[0.18em] text-muted-foreground uppercase">
-                Status
-              </TableHead>
-              <TableHead className="w-[200px] px-6 text-right text-[10px] font-semibold tracking-[0.18em] text-muted-foreground uppercase">
-                Progress
-              </TableHead>
+          <TableHeader>
+            <TableRow className="hover:bg-transparent">
+              <TableHead>Title</TableHead>
+              <TableHead className="w-[170px]">Author</TableHead>
+              <TableHead className="w-[150px]">Issue</TableHead>
+              <TableHead className="w-[180px]">Status</TableHead>
+              <TableHead className="w-[140px]">Progress</TableHead>
             </TableRow>
           </TableHeader>
-
           <TableBody>
-            {ARTICLE_ROWS.map((row) => {
-              const statusClasses = getStatusClasses(row.status)
-
-              return (
-                <TableRow key={row.title} className="h-20 border-border/60 hover:bg-transparent">
-                  <TableCell className="px-6 py-4">
-                    <div className="flex flex-col gap-1">
-                      <p className="font-heading text-3xl leading-none tracking-tight text-foreground">
-                        {row.title}
-                      </p>
-                      <p className="text-[11px] text-muted-foreground">{row.wordProgress}</p>
-                    </div>
-                  </TableCell>
-                  <TableCell className="px-3 py-4 text-sm text-foreground">
-                    {row.author}
-                  </TableCell>
-                  <TableCell className="px-3 py-4 text-sm text-foreground">
-                    {row.issue}
-                  </TableCell>
-                  <TableCell className="px-3 py-4">
-                    <div
+            {ARTICLE_ROWS.map((row) => (
+              <TableRow key={row.title}>
+                <TableCell>
+                  <div className="flex flex-col gap-1">
+                    <p className="font-heading text-xl tracking-tight text-foreground">
+                      {row.title}
+                    </p>
+                    <p className="text-xs text-muted-foreground">
+                      {row.wordProgress}
+                    </p>
+                  </div>
+                </TableCell>
+                <TableCell>{row.author}</TableCell>
+                <TableCell>{row.issue}</TableCell>
+                <TableCell>
+                  <Badge variant={STATUS_BADGE_VARIANT[row.status]}>
+                    <span
                       className={cn(
-                        "flex items-center gap-1.5 text-[10px] font-semibold tracking-[0.16em] uppercase",
-                        statusClasses.textClassName
+                        "size-1.5 rounded-full",
+                        STATUS_DOT_CLASSNAME[row.status]
                       )}
-                    >
-                      <span
-                        className={cn("size-1.5 rounded-full", statusClasses.dotClassName)}
-                      />
-                      <span>{row.statusLabel}</span>
-                    </div>
-                  </TableCell>
-                  <TableCell className="px-6 py-4">
-                    <div className="flex items-center justify-end gap-3">
-                      <div className="relative h-px w-16 bg-border">
-                        <div
-                          className={cn(
-                            "absolute inset-y-0 left-0 bg-foreground",
-                            row.progressClassName
-                          )}
-                        />
-                      </div>
-                      <span className="w-9 text-right text-[11px] font-medium">
-                        {row.progress}%
-                      </span>
-                    </div>
-                  </TableCell>
-                </TableRow>
-              )
-            })}
+                    />
+                    {row.statusLabel}
+                  </Badge>
+                </TableCell>
+                <TableCell>
+                  <Progress
+                    value={row.progress}
+                    aria-label={`${row.progress}% complete`}
+                    className="flex flex-row-reverse items-center **:data-[slot=progress-track]:w-16"
+                  >
+                    <ProgressValue>
+                      {(formattedValue) => `${formattedValue}`}
+                    </ProgressValue>
+                  </Progress>
+                </TableCell>
+              </TableRow>
+            ))}
           </TableBody>
         </Table>
-
-        <div className="flex-1 border-t border-border/60" />
-
-        <footer className="flex items-center justify-between gap-4 border-t border-border/70 px-6 py-4">
-          <p className="text-[10px] font-semibold tracking-[0.16em] text-muted-foreground uppercase">
-            Showing 4 of 24 articles
-          </p>
-          <div className="flex items-center gap-1">
-            <PaginationButton>
-              <ChevronLeftIcon className="size-3.5" />
-            </PaginationButton>
-            <PaginationButton active>1</PaginationButton>
-            <PaginationButton>2</PaginationButton>
-            <PaginationButton>3</PaginationButton>
-            <PaginationButton>
-              <ChevronRightIcon className="size-3.5" />
-            </PaginationButton>
-          </div>
-        </footer>
-      </div>
-    </section>
+      </CardContent>
+      <CardFooter>
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationLink
+                href="#"
+                size="icon-sm"
+                aria-label="Previous page"
+              >
+                <ChevronLeftIcon className="cn-rtl-flip" />
+              </PaginationLink>
+            </PaginationItem>
+            {[1, 2, 3].map((page) => (
+              <PaginationItem key={page}>
+                <PaginationLink href="#" size="icon-sm" isActive={page === 1}>
+                  {page}
+                </PaginationLink>
+              </PaginationItem>
+            ))}
+            <PaginationItem>
+              <PaginationLink href="#" size="icon-sm" aria-label="Next page">
+                <ChevronRightIcon className="cn-rtl-flip" />
+              </PaginationLink>
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      </CardFooter>
+    </Card>
   )
 }
diff --git a/apps/v4/app/(app)/(styles)/sera/preview-02/components/preview-header.tsx b/apps/v4/app/(app)/(styles)/sera/preview-02/components/preview-header.tsx
index ba0ea92312..e03a2a951d 100644
--- a/apps/v4/app/(app)/(styles)/sera/preview-02/components/preview-header.tsx
+++ b/apps/v4/app/(app)/(styles)/sera/preview-02/components/preview-header.tsx
@@ -1,56 +1,46 @@
-"use client"
+import { ArrowLeftIcon, PlusIcon } from "lucide-react"
 
-import * as React from "react"
-import { ChevronLeftIcon, SearchIcon } from "lucide-react"
-
-import { Button } from "@/styles/base-sera/ui/button"
-import { Input } from "@/styles/base-sera/ui/input"
 import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/styles/base-sera/ui/select"
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/styles/base-sera/ui/breadcrumb"
+import { Button } from "@/styles/base-sera/ui/button"
+import { ButtonGroup } from "@/styles/base-sera/ui/button-group"
 
 export function PreviewHeader() {
   return (
-    <header className="container flex flex-col gap-8 py-8 md:py-10">
-      <div className="flex flex-col gap-2">
-        <div className="inline-flex items-center gap-1.5 text-[11px] font-semibold tracking-[0.16em] text-muted-foreground uppercase">
-          <ChevronLeftIcon className="size-3.5" />
-          <span>Editorial dashboard</span>
+    <header>
+      <div className="container flex flex-col items-center justify-center gap-(--gap) py-(--gap) sm:flex-row sm:justify-between">
+        <div className="flex flex-col gap-2 text-center sm:text-left">
+          <Breadcrumb>
+            <BreadcrumbList className="justify-center md:justify-start">
+              <BreadcrumbItem>
+                <BreadcrumbLink
+                  href="#"
+                  className="inline-flex items-center gap-1.5"
+                >
+                  <ArrowLeftIcon className="size-3" />
+                  Editorial Dashboard
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+          <h1 className="line-clamp-1 font-heading text-3xl tracking-wide uppercase md:text-3xl lg:text-4xl">
+            Article Directory
+          </h1>
         </div>
-        <h1 className="font-heading text-4xl leading-none tracking-tight uppercase md:text-5xl">
-          Article Directory
-        </h1>
-      </div>
-
-      <div className="flex flex-col gap-3 md:flex-row md:items-center md:justify-end">
-        <div className="relative w-full max-w-[320px]">
-          <SearchIcon className="pointer-events-none absolute top-1/2 left-3 size-3.5 -translate-y-1/2 text-muted-foreground" />
-          <Input
-            type="search"
-            placeholder="Search articles..."
-            className="h-10 border border-border/80 bg-background py-2 pr-3 pl-9 text-[11px] font-medium tracking-[0.14em] uppercase placeholder:tracking-[0.14em]"
-          />
+        <div>
+          <ButtonGroup className="gap-2 sm:ml-auto md:gap-4">
+            <Button>
+              <PlusIcon data-icon="inline-start" />
+              New Article
+            </Button>
+          </ButtonGroup>
         </div>
-
-        <Select defaultValue="all-issues">
-          <SelectTrigger className="h-10 min-w-[132px] border border-border/80 bg-background px-4 text-[11px] font-semibold tracking-[0.14em] uppercase">
-            <SelectValue placeholder="All issues" />
-          </SelectTrigger>
-          <SelectContent>
-            <SelectItem value="all-issues">All issues</SelectItem>
-            <SelectItem value="summer-2024">Summer 2024</SelectItem>
-            <SelectItem value="autumn-2024">Autumn 2024</SelectItem>
-            <SelectItem value="winter-2024">Winter 2024</SelectItem>
-          </SelectContent>
-        </Select>
-
-        <Button className="h-10 px-5 text-[11px] tracking-[0.16em]">
-          New Article
-        </Button>
       </div>
     </header>
   )
diff --git a/apps/v4/app/(app)/(styles)/sera/preview-02/index.tsx b/apps/v4/app/(app)/(styles)/sera/preview-02/index.tsx
index 2b4418b0f9..fea9d72df2 100644
--- a/apps/v4/app/(app)/(styles)/sera/preview-02/index.tsx
+++ b/apps/v4/app/(app)/(styles)/sera/preview-02/index.tsx
@@ -1,11 +1,14 @@
+import { Separator } from "@/styles/base-sera/ui/separator"
+
 import { ArticleDirectory } from "./components/article-directory"
 import { PreviewHeader } from "./components/preview-header"
 
 export function Preview02() {
   return (
-    <div className="preview theme-taupe w-full flex-1 bg-muted font-sans ring-1 ring-foreground/5">
+    <div className="preview theme-taupe @container/preview w-full flex-1 bg-muted pt-4 font-sans ring-1 ring-foreground/5 [--gap:--spacing(4)] sm:pt-0 md:[--gap:--spacing(6)] xl:[--gap:--spacing(8)] **:[.container]:px-(--gap)">
       <PreviewHeader />
-      <div className="container pb-8">
+      <Separator className="hidden sm:block" />
+      <div className="container py-(--gap)">
         <ArticleDirectory />
       </div>
     </div>
diff --git a/apps/v4/app/(app)/(styles)/sera/preview-03/components/editor-workspace.tsx b/apps/v4/app/(app)/(styles)/sera/preview-03/components/editor-workspace.tsx
index 69126a3a2d..5435111176 100644
--- a/apps/v4/app/(app)/(styles)/sera/preview-03/components/editor-workspace.tsx
+++ b/apps/v4/app/(app)/(styles)/sera/preview-03/components/editor-workspace.tsx
@@ -1,19 +1,67 @@
 "use client"
 
-import * as React from "react"
-import { BoldIcon, Code2Icon, LinkIcon } from "lucide-react"
+import {
+  AlignCenterIcon,
+  AlignLeftIcon,
+  AlignRightIcon,
+  BoldIcon,
+  ChevronDownIcon,
+  Code2Icon,
+  Heading1Icon,
+  Heading2Icon,
+  Heading3Icon,
+  ImageIcon,
+  ItalicIcon,
+  LinkIcon,
+  ListIcon,
+  ListOrderedIcon,
+  RedoIcon,
+  StrikethroughIcon,
+  TypeIcon,
+  UnderlineIcon,
+  UndoIcon,
+} from "lucide-react"
 
 import { Button } from "@/styles/base-sera/ui/button"
+import {
+  ButtonGroup,
+  ButtonGroupSeparator,
+} from "@/styles/base-sera/ui/button-group"
 import {
   Card,
   CardContent,
-  CardFooter,
   CardHeader,
   CardTitle,
 } from "@/styles/base-sera/ui/card"
 import { Checkbox } from "@/styles/base-sera/ui/checkbox"
-import { Progress, ProgressValue } from "@/styles/base-sera/ui/progress"
-import { Separator } from "@/styles/base-sera/ui/separator"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/styles/base-sera/ui/dropdown-menu"
+import {
+  Field,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@/styles/base-sera/ui/field"
+import { Input } from "@/styles/base-sera/ui/input"
+import {
+  Progress,
+  ProgressLabel,
+  ProgressValue,
+} from "@/styles/base-sera/ui/progress"
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/styles/base-sera/ui/select"
+import { Textarea } from "@/styles/base-sera/ui/textarea"
 
 type Milestone = {
   name: string
@@ -45,160 +93,222 @@ const MILESTONES: Milestone[] = [
   },
 ]
 
+const ISSUES = [
+  { label: "Spring Issue 2024", value: "spring-2024" },
+  { label: "Summer Issue 2024", value: "summer-2024" },
+  { label: "Autumn Issue 2024", value: "autumn-2024" },
+  { label: "Winter Issue 2024", value: "winter-2024" },
+]
+
 export function EditorWorkspace() {
   return (
     <div className="grid grid-cols-1 items-start gap-6 xl:grid-cols-[minmax(0,1fr)_300px]">
-      <section className="flex min-h-[980px] flex-col border border-border/70 bg-background">
-        <div className="flex flex-wrap items-center justify-between gap-3 border-b border-border/70 px-4 py-3">
-          <div className="flex flex-wrap items-center gap-1">
-            <Button
-              variant="ghost"
-              size="sm"
-              className="h-7 px-2 text-[10px] font-semibold tracking-[0.16em] text-muted-foreground uppercase"
-            >
-              Normal Text
+      <section className="flex flex-col border border-border/70 bg-background">
+        <div className="flex border-b p-2">
+          <ButtonGroup>
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                render={
+                  <Button variant="ghost" size="sm">
+                    Normal Text
+                    <ChevronDownIcon data-icon="inline-end" />
+                  </Button>
+                }
+              />
+              <DropdownMenuContent>
+                <DropdownMenuItem>
+                  <TypeIcon />
+                  Normal Text
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Heading1Icon />
+                  Heading 1
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Heading2Icon />
+                  Heading 2
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <Heading3Icon />
+                  Heading 3
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <ListIcon />
+                  Bullet List
+                </DropdownMenuItem>
+                <DropdownMenuItem>
+                  <ListOrderedIcon />
+                  Numbered List
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <ButtonGroupSeparator className="mx-2 data-vertical:h-4 data-vertical:self-center" />
+            <Button variant="ghost" size="icon-sm" aria-label="Bold">
+              <BoldIcon />
             </Button>
-            <Separator orientation="vertical" className="h-4" />
-            <Button variant="ghost" size="icon-sm" className="size-7">
-              <BoldIcon className="size-3.5" />
+            <Button variant="ghost" size="icon-sm" aria-label="Italic">
+              <ItalicIcon />
             </Button>
-            <Button variant="ghost" size="icon-sm" className="size-7">
-              <Code2Icon className="size-3.5" />
+            <Button variant="ghost" size="icon-sm" aria-label="Underline">
+              <UnderlineIcon />
             </Button>
-            <Button variant="ghost" size="icon-sm" className="size-7">
-              <LinkIcon className="size-3.5" />
+            <Button variant="ghost" size="icon-sm" aria-label="Strikethrough">
+              <StrikethroughIcon />
             </Button>
-          </div>
-          <p className="text-[10px] font-semibold tracking-[0.16em] text-muted-foreground uppercase">
-            1,402 words
-          </p>
+            <Button variant="ghost" size="icon-sm" aria-label="Code">
+              <Code2Icon />
+            </Button>
+            <ButtonGroupSeparator className="mx-2 data-vertical:h-4 data-vertical:self-center" />
+            <Button variant="ghost" size="icon-sm" aria-label="Align Left">
+              <AlignLeftIcon />
+            </Button>
+            <Button variant="ghost" size="icon-sm" aria-label="Align Center">
+              <AlignCenterIcon />
+            </Button>
+            <Button variant="ghost" size="icon-sm" aria-label="Align Right">
+              <AlignRightIcon />
+            </Button>
+            <ButtonGroupSeparator className="mx-2 data-vertical:h-4 data-vertical:self-center" />
+            <Button variant="ghost" size="icon-sm" aria-label="Link">
+              <LinkIcon />
+            </Button>
+            <Button variant="ghost" size="icon-sm" aria-label="Image">
+              <ImageIcon />
+            </Button>
+          </ButtonGroup>
+          <ButtonGroup className="ml-auto">
+            <Button variant="ghost" size="icon-sm" aria-label="Undo">
+              <UndoIcon />
+            </Button>
+            <Button variant="ghost" size="icon-sm" aria-label="Redo">
+              <RedoIcon />
+            </Button>
+          </ButtonGroup>
         </div>
-
-        <div className="flex flex-1 flex-col gap-8 px-10 py-10 md:px-14">
-          <p className="max-w-[72ch] text-[29px] leading-[1.65] text-foreground/95">
-            As cities continue to expand at an unprecedented rate, the architectural
-            paradigm is shifting from mere expansion to sustainable integration. The
-            concrete jungles of the 20th century are making way for structures that
-            breathe, adapt, and give back to their environments.
+        <div className="mx-auto flex max-w-2xl flex-1 flex-col gap-8 px-10 py-10 md:px-14">
+          <h1 className="font-heading text-4xl tracking-wide uppercase">
+            The Future of Sustainable Architecture
+          </h1>
+          <p>
+            As cities continue to expand at an unprecedented rate, the
+            architectural paradigm is shifting from mere expansion to
+            sustainable integration. The concrete jungles of the 20th century
+            are making way for structures that breathe, adapt, and give back to
+            their environments.
           </p>
-
-          <p className="max-w-[72ch] text-[29px] leading-[1.65] text-foreground/95">
-            Historically, urban development has been a zero-sum game with nature. We
-            paved over wetlands, redirected rivers, and constructed imposing glass towers
-            that guzzled energy. However, a new generation of architects, like Alistair
-            Sterling, are proposing a radical rethink of our built environment.
+          <p>
+            Historically, urban development has been a zero-sum game with
+            nature. We paved over wetlands, redirected rivers, and constructed
+            imposing glass towers that guzzled energy. However, a new generation
+            of architects, like Alistair Sterling, are proposing a radical
+            rethink of our built environment.
           </p>
-
-          <h2 className="font-heading text-4xl tracking-tight uppercase">
+          <h2 className="font-heading text-2xl tracking-wide uppercase">
             The Living Building Challenge
           </h2>
-
-          <p className="max-w-[72ch] text-[29px] leading-[1.65] text-foreground/95">
-            Sterling's latest project in downtown Seattle is a testament to this new
-            philosophy. "We are no longer designing static structures," Sterling
-            explained during a recent site visit. "We are engineering localized
-            ecosystems."
+          <p>
+            Sterling&apos;s latest project in downtown Seattle is a testament to
+            this new philosophy. &quot;We are no longer designing static
+            structures,&quot; Sterling explained during a recent site visit.
+            &quot;We are engineering localized ecosystems.&quot;
           </p>
-
-          <p className="max-w-[72ch] text-[29px] leading-[1.65] text-foreground/95">
-            The building features a facade of responsive biomaterials that adjust their
-            porosity based on humidity and temperature, significantly reducing the need
-            for artificial climate control. Rainwater is not merely channeled away but
-            captured, filtered through a series of integrated rooftop wetlands, and
-            reused within the building's greywater system.
+          <p>
+            The building features a facade of responsive biomaterials that
+            adjust their porosity based on humidity and temperature,
+            significantly reducing the need for artificial climate control.
+            Rainwater is not merely channeled away but captured, filtered
+            through a series of integrated rooftop wetlands, and reused within
+            the building&apos;s greywater system.
           </p>
-
-          <p className="max-w-[72ch] text-[29px] leading-[1.65] text-foreground/95">
-            This shift requires more than just innovative materials; it demands a
-            fundamental change in how we value space. The metric of success is no longer
-            simply cost per square foot, but the building's overall environmental impact
-            over its lifecycle.
+          <p>
+            This shift requires more than just innovative materials; it demands
+            a fundamental change in how we value space. The metric of success is
+            no longer simply cost per square foot, but the building&apos;s
+            overall environmental impact over its lifecycle.
           </p>
-
-          <p className="max-w-[72ch] text-[25px] italic leading-[1.6] text-muted-foreground">
-            Integration of solar passive design elements needs more elaboration here.
-            Check with engineering team for specific stats.
+          <p>
+            Integration of solar passive design elements needs more elaboration
+            here. Check with engineering team for specific stats.
+          </p>
+          <p className="text-sm text-muted-foreground">
+            This shift requires more than just innovative materials; it demands
+            a fundamental change in how we value space. Check with engineering
+            team for specific stats.
           </p>
         </div>
       </section>
-
-      <aside className="flex min-h-[980px] flex-col gap-6">
-        <Card className="gap-0 py-0">
-          <CardHeader className="border-b border-border/70 py-5">
+      <aside className="flex flex-col gap-(--gap)">
+        <Card>
+          <CardHeader>
             <CardTitle>Article Details</CardTitle>
           </CardHeader>
-          <CardContent className="flex flex-col gap-5 py-5">
-            <div className="flex flex-col gap-1">
-              <p className="text-[10px] font-semibold tracking-[0.16em] text-muted-foreground uppercase">
-                Issue
-              </p>
-              <p className="font-medium">Summer Issue 2024</p>
-            </div>
-            <div className="flex flex-col gap-1">
-              <p className="text-[10px] font-semibold tracking-[0.16em] text-muted-foreground uppercase">
-                Author
-              </p>
-              <p className="font-medium">Elena Rostova</p>
-            </div>
-            <div className="flex flex-col gap-2">
-              <p className="text-[10px] font-semibold tracking-[0.16em] text-muted-foreground uppercase">
-                Target Word Count
-              </p>
-              <Progress value={70}>
-                <ProgressValue className="w-full text-right text-[10px] font-medium tracking-[0.12em] text-muted-foreground uppercase">
-                  1.4k / 2.0k
-                </ProgressValue>
-              </Progress>
-            </div>
+          <CardContent>
+            <FieldGroup>
+              <Field>
+                <FieldLabel>Issue</FieldLabel>
+                <Select items={ISSUES} defaultValue="summer-2024">
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      {ISSUES.map((issue) => (
+                        <SelectItem key={issue.value} value={issue.value}>
+                          {issue.label}
+                        </SelectItem>
+                      ))}
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </Field>
+              <Field>
+                <FieldLabel>Author</FieldLabel>
+                <Input defaultValue="Elena Rostova" />
+              </Field>
+            </FieldGroup>
           </CardContent>
         </Card>
-
-        <Card className="gap-0 py-0">
-          <CardHeader className="border-b border-border/70 py-5">
+        <Card>
+          <CardHeader>
             <CardTitle>Publication Flow</CardTitle>
           </CardHeader>
-          <CardContent className="flex flex-col gap-5 py-5">
-            <div className="flex flex-col gap-2">
-              <p className="text-[10px] font-semibold tracking-[0.16em] text-muted-foreground uppercase">
-                Editorial Progress
-              </p>
-              <Progress value={45}>
-                <ProgressValue className="w-full text-right text-[10px] font-medium tracking-[0.12em] text-muted-foreground uppercase">
-                  45%
-                </ProgressValue>
-              </Progress>
-            </div>
-
-            <div className="flex flex-col gap-3">
-              <p className="text-[10px] font-semibold tracking-[0.16em] text-muted-foreground uppercase">
-                Required Milestones
-              </p>
-              {MILESTONES.map((milestone) => (
-                <label
-                  key={milestone.name}
-                  className="grid grid-cols-[18px_1fr] items-start gap-2.5"
-                >
-                  <Checkbox checked={milestone.complete} />
-                  <span className="flex flex-col gap-0.5">
-                    <span className="text-sm text-foreground">{milestone.name}</span>
-                    <span className="text-[10px] tracking-[0.12em] text-muted-foreground uppercase">
-                      {milestone.note ?? ""}
-                    </span>
-                  </span>
-                </label>
-              ))}
-            </div>
+          <CardContent>
+            <FieldGroup>
+              <FieldSet>
+                <FieldLegend>Required Milestones</FieldLegend>
+                <Field>
+                  {MILESTONES.map((milestone) => (
+                    <Field key={milestone.name} orientation="horizontal">
+                      <Checkbox
+                        defaultChecked={milestone.complete}
+                        name={milestone.name}
+                        id={milestone.name}
+                      />
+                      <FieldLabel htmlFor={milestone.name}>
+                        {milestone.name}
+                      </FieldLabel>
+                    </Field>
+                  ))}
+                </Field>
+              </FieldSet>
+              <Field>
+                <FieldLabel>Add note for editor</FieldLabel>
+                <Textarea placeholder="This article needs to be revised for clarity and accuracy." />
+              </Field>
+            </FieldGroup>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle>Word Count</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Progress value={70}>
+              <ProgressLabel>1,402 / 2,000 words</ProgressLabel>
+              <ProgressValue />
+            </Progress>
           </CardContent>
         </Card>
-
-        <CardFooter className="mt-auto border border-border/70 bg-background py-4">
-          <Button
-            variant="outline"
-            className="w-full text-[10px] font-semibold tracking-[0.16em]"
-          >
-            Add Note for Editor
-          </Button>
-        </CardFooter>
       </aside>
     </div>
   )
diff --git a/apps/v4/app/(app)/(styles)/sera/preview-03/components/preview-header.tsx b/apps/v4/app/(app)/(styles)/sera/preview-03/components/preview-header.tsx
index 28a5b44138..4979816ece 100644
--- a/apps/v4/app/(app)/(styles)/sera/preview-03/components/preview-header.tsx
+++ b/apps/v4/app/(app)/(styles)/sera/preview-03/components/preview-header.tsx
@@ -1,42 +1,44 @@
-"use client"
-
-import * as React from "react"
-import { ArrowLeftIcon } from "lucide-react"
+import { ArrowLeftIcon, ExternalLinkIcon } from "lucide-react"
 
+import { Badge } from "@/styles/base-sera/ui/badge"
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+} from "@/styles/base-sera/ui/breadcrumb"
 import { Button } from "@/styles/base-sera/ui/button"
+import { ButtonGroup } from "@/styles/base-sera/ui/button-group"
 
 export function PreviewHeader() {
   return (
-    <header className="container flex flex-col gap-6 py-8 md:py-10">
-      <Button
-        variant="ghost"
-        className="h-auto w-fit px-0 text-[10px] font-semibold tracking-[0.16em] text-muted-foreground uppercase hover:bg-transparent hover:text-foreground"
-      >
-        <ArrowLeftIcon className="size-3.5" />
-        Back to articles
-      </Button>
-
-      <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
-        <h1 className="font-heading text-4xl leading-none tracking-tight uppercase md:text-5xl">
-          The Future of Sustainable Architecture
-        </h1>
-
-        <div className="flex flex-wrap items-center gap-2 lg:justify-end">
-          <div className="inline-flex h-9 items-center gap-2 border border-border/70 px-3 text-[10px] font-semibold tracking-[0.16em] text-muted-foreground uppercase">
-            <span className="size-1 rounded-full bg-foreground/80" />
-            Autosaved 2 mins ago
-          </div>
-          <Button
-            variant="outline"
-            size="sm"
-            className="h-9 px-4 text-[10px] font-semibold tracking-[0.16em]"
-          >
-            Preview
-          </Button>
-          <Button size="sm" className="h-9 px-4 text-[10px] font-semibold tracking-[0.16em]">
-            Submit Draft
-          </Button>
+    <header>
+      <div className="container flex flex-col items-center justify-center gap-(--gap) py-(--gap) sm:flex-row sm:justify-between">
+        <div className="flex flex-col gap-2 text-center sm:text-left">
+          <Breadcrumb>
+            <BreadcrumbList>
+              <BreadcrumbItem>
+                <BreadcrumbLink href="#" className="flex items-center gap-1.5">
+                  <ArrowLeftIcon className="size-3.5" />
+                  Back to articles
+                </BreadcrumbLink>
+              </BreadcrumbItem>
+            </BreadcrumbList>
+          </Breadcrumb>
+          <h1 className="line-clamp-1 font-heading text-3xl tracking-wide uppercase md:text-3xl lg:text-4xl">
+            EDIT ARTICLE
+          </h1>
         </div>
+        <ButtonGroup className="gap-2 md:gap-4">
+          <Badge title="2 minutes ago">Autosaved</Badge>
+          <ButtonGroup className="gap-2 md:gap-4">
+            <Button variant="link">
+              Preview
+              <ExternalLinkIcon data-icon="inline-end" />
+            </Button>
+            <Button>Submit Draft</Button>
+          </ButtonGroup>
+        </ButtonGroup>
       </div>
     </header>
   )
diff --git a/apps/v4/app/(app)/(styles)/sera/preview-03/index.tsx b/apps/v4/app/(app)/(styles)/sera/preview-03/index.tsx
index 7f200f0b11..0d9c55f4c6 100644
--- a/apps/v4/app/(app)/(styles)/sera/preview-03/index.tsx
+++ b/apps/v4/app/(app)/(styles)/sera/preview-03/index.tsx
@@ -1,11 +1,14 @@
+import { Separator } from "@/styles/base-sera/ui/separator"
+
 import { EditorWorkspace } from "./components/editor-workspace"
 import { PreviewHeader } from "./components/preview-header"
 
 export function Preview03() {
   return (
-    <div className="preview theme-taupe w-full flex-1 bg-muted font-sans ring-1 ring-foreground/5">
+    <div className="preview theme-taupe @container/preview w-full flex-1 bg-muted pt-4 font-sans ring-1 ring-foreground/5 [--gap:--spacing(4)] sm:pt-0 md:[--gap:--spacing(6)] xl:[--gap:--spacing(8)] **:[.container]:px-(--gap)">
       <PreviewHeader />
-      <div className="container pb-8">
+      <Separator className="hidden sm:block" />
+      <div className="container py-(--gap)">
         <EditorWorkspace />
       </div>
     </div>
diff --git a/apps/v4/app/(app)/(styles)/sera/preview-04/components/publication-issues.tsx b/apps/v4/app/(app)/(styles)/sera/preview-04/components/publication-issues.tsx
deleted file mode 100644
index cafb86a600..0000000000
--- a/apps/v4/app/(app)/(styles)/sera/preview-04/components/publication-issues.tsx
+++ /dev/null
@@ -1,190 +0,0 @@
-"use client"
-
-import * as React from "react"
-import { AlertCircleIcon, CheckIcon } from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import { Badge } from "@/styles/base-sera/ui/badge"
-import { Button } from "@/styles/base-sera/ui/button"
-import {
-  Progress,
-  ProgressTrack,
-  ProgressValue,
-} from "@/styles/base-sera/ui/progress"
-import { Separator } from "@/styles/base-sera/ui/separator"
-
-type IssueStatus = "active" | "draft" | "archived"
-type IssueHealth = "overdue" | "on-track" | "completed"
-
-type PublicationIssue = {
-  name: string
-  dueLabel: string
-  status: IssueStatus
-  progress: number
-  health: IssueHealth
-  healthLabel: string
-  primaryAction: string
-  secondaryAction?: string
-  disabled?: boolean
-}
-
-const PUBLICATION_ISSUES: PublicationIssue[] = [
-  {
-    name: "Summer Issue",
-    dueLabel: "Due Aug 15, 2024",
-    status: "active",
-    progress: 45,
-    health: "overdue",
-    healthLabel: "1 block overdue",
-    primaryAction: "View Board",
-    secondaryAction: "Manage",
-  },
-  {
-    name: "Autumn Issue",
-    dueLabel: "Due Nov 01, 2024",
-    status: "draft",
-    progress: 10,
-    health: "on-track",
-    healthLabel: "On track",
-    primaryAction: "Resume Draft",
-    secondaryAction: "Manage",
-  },
-  {
-    name: "Spring Issue",
-    dueLabel: "Published May 10, 2024",
-    status: "archived",
-    progress: 100,
-    health: "completed",
-    healthLabel: "Completed",
-    primaryAction: "View Archive",
-    disabled: true,
-  },
-]
-
-function getStatusVariant(
-  status: IssueStatus
-): React.ComponentProps<typeof Badge>["variant"] {
-  if (status === "active") {
-    return "outline"
-  }
-
-  if (status === "draft") {
-    return "secondary"
-  }
-
-  return "ghost"
-}
-
-function getHealthStyles(health: IssueHealth): {
-  icon: React.JSX.Element
-  className: string
-} {
-  if (health === "overdue") {
-    return {
-      icon: <AlertCircleIcon className="size-3.5" />,
-      className: "text-foreground",
-    }
-  }
-
-  return {
-    icon: <CheckIcon className="size-3.5" />,
-    className: "text-muted-foreground",
-  }
-}
-
-export function PublicationIssues() {
-  return (
-    <section className="flex flex-col gap-6 border border-border/70 bg-background p-6 md:p-8">
-      <header className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
-        <div className="flex flex-col gap-1">
-          <h2 className="font-heading text-5xl leading-none tracking-tight uppercase">
-            Publication Issues
-          </h2>
-          <p className="text-[11px] font-semibold tracking-[0.22em] text-muted-foreground uppercase">
-            Editorial Pipeline Management
-          </p>
-        </div>
-        <Button className="h-10 w-full px-5 text-[10px] font-semibold tracking-[0.2em] lg:w-auto">
-          Create New Issue
-        </Button>
-      </header>
-
-      <Separator />
-
-      <div className="flex flex-col gap-4">
-        {PUBLICATION_ISSUES.map((issue) => {
-          const statusVariant = getStatusVariant(issue.status)
-          const healthStyles = getHealthStyles(issue.health)
-
-          return (
-            <article
-              key={issue.name}
-              className="grid grid-cols-1 gap-5 border border-border/60 bg-card px-5 py-6 md:grid-cols-[minmax(0,1fr)_minmax(260px,1fr)_auto] md:items-center md:gap-6 md:px-7"
-            >
-              <div className="grid grid-cols-1 gap-2 md:grid-cols-[minmax(0,1fr)_auto] md:items-start md:gap-4">
-                <div className="flex flex-col gap-1">
-                  <h3 className="font-heading text-4xl leading-none tracking-tight">
-                    {issue.name}
-                  </h3>
-                  <p className="text-[11px] font-semibold tracking-[0.18em] text-muted-foreground uppercase">
-                    {issue.dueLabel}
-                  </p>
-                </div>
-                <Badge
-                  variant={statusVariant}
-                  className="w-fit px-3 py-1 text-[10px] font-semibold tracking-[0.18em] uppercase"
-                >
-                  {issue.status}
-                </Badge>
-              </div>
-
-              <div className="flex flex-col gap-3 border-l-0 border-border/60 md:border-l md:pl-6">
-                <Progress value={issue.progress} className="gap-2">
-                  <div className="flex w-full items-center justify-between gap-2">
-                    <span className="text-[10px] font-semibold tracking-[0.18em] text-muted-foreground uppercase">
-                      Editorial Progress
-                    </span>
-                    <ProgressValue className="m-0 text-[11px] font-semibold text-foreground">
-                      {(value) => `${value}%`}
-                    </ProgressValue>
-                  </div>
-                  <ProgressTrack className="bg-border/90" />
-                </Progress>
-                <div
-                  className={cn(
-                    "flex items-center gap-2 text-[12px] font-medium",
-                    healthStyles.className
-                  )}
-                >
-                  {healthStyles.icon}
-                  <span>{issue.healthLabel}</span>
-                </div>
-              </div>
-
-              <div className="flex flex-wrap items-center justify-start gap-2 border-l-0 border-border/60 md:justify-end md:border-l md:pl-6">
-                {issue.secondaryAction ? (
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    disabled={issue.disabled}
-                    className="h-9 px-4 text-[10px] font-semibold tracking-[0.16em]"
-                  >
-                    {issue.secondaryAction}
-                  </Button>
-                ) : null}
-                <Button
-                  type="button"
-                  variant={issue.status === "active" ? "default" : "outline"}
-                  disabled={issue.disabled}
-                  className="h-9 px-4 text-[10px] font-semibold tracking-[0.16em]"
-                >
-                  {issue.primaryAction}
-                </Button>
-              </div>
-            </article>
-          )
-        })}
-      </div>
-    </section>
-  )
-}
diff --git a/apps/v4/app/(app)/(styles)/sera/preview-04/index.tsx b/apps/v4/app/(app)/(styles)/sera/preview-04/index.tsx
deleted file mode 100644
index 78cce832de..0000000000
--- a/apps/v4/app/(app)/(styles)/sera/preview-04/index.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { PublicationIssues } from "./components/publication-issues"
-
-export function Preview04() {
-  return (
-    <div className="preview theme-taupe w-full flex-1 bg-muted font-sans ring-1 ring-foreground/5">
-      <div className="container py-8">
-        <PublicationIssues />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/v4/app/(app)/(styles)/sera/preview-05/components/editorial-pipeline-board.tsx b/apps/v4/app/(app)/(styles)/sera/preview-05/components/editorial-pipeline-board.tsx
deleted file mode 100644
index 6a873cd865..0000000000
--- a/apps/v4/app/(app)/(styles)/sera/preview-05/components/editorial-pipeline-board.tsx
+++ /dev/null
@@ -1,280 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  CalendarIcon,
-  CheckIcon,
-  ChevronRightIcon,
-  CircleAlertIcon,
-  FileTextIcon,
-  FilterIcon,
-} from "lucide-react"
-
-import { cn } from "@/lib/utils"
-import {
-  Avatar,
-  AvatarFallback,
-  AvatarGroup,
-} from "@/styles/base-sera/ui/avatar"
-import { Badge } from "@/styles/base-sera/ui/badge"
-import { Button } from "@/styles/base-sera/ui/button"
-import { Progress, ProgressTrack, ProgressValue } from "@/styles/base-sera/ui/progress"
-import { Separator } from "@/styles/base-sera/ui/separator"
-
-type PipelineStatus = "draft" | "active" | "archived"
-type AlertTone = "neutral" | "warning"
-type ColumnKey = "planning" | "in-progress" | "published"
-
-type IssueCard = {
-  title: string
-  volume: string
-  status: PipelineStatus
-  dueLabel: string
-  articleCount: number
-  progress: number
-  assignees: string[]
-  alert?: {
-    title: string
-    message: string
-    tone: AlertTone
-  }
-}
-
-type PipelineColumn = {
-  key: ColumnKey
-  title: string
-  count: number
-  cards: IssueCard[]
-}
-
-const PIPELINE_COLUMNS: PipelineColumn[] = [
-  {
-    key: "planning",
-    title: "Planning",
-    count: 1,
-    cards: [
-      {
-        title: "Winter Issue",
-        volume: "Vol 4. / Issue 12",
-        status: "draft",
-        dueLabel: "Due Nov 15",
-        articleCount: 12,
-        progress: 10,
-        assignees: ["MS", "LI"],
-      },
-    ],
-  },
-  {
-    key: "in-progress",
-    title: "In Progress",
-    count: 2,
-    cards: [
-      {
-        title: "Fall Issue",
-        volume: "Vol 4. / Issue 11",
-        status: "active",
-        dueLabel: "Due Oct 01",
-        articleCount: 14,
-        progress: 85,
-        assignees: ["AS", "EP"],
-        alert: {
-          title: "Layout Review",
-          message: "Awaiting final sign-off from art director.",
-          tone: "neutral",
-        },
-      },
-      {
-        title: "Summer Issue",
-        volume: "Vol 4. / Issue 10",
-        status: "active",
-        dueLabel: "Due Jul 15",
-        articleCount: 15,
-        progress: 45,
-        assignees: ["AS", "KL"],
-        alert: {
-          title: "1 block overdue",
-          message: "Photography needs final sign-off.",
-          tone: "warning",
-        },
-      },
-    ],
-  },
-  {
-    key: "published",
-    title: "Published",
-    count: 1,
-    cards: [
-      {
-        title: "Spring Issue",
-        volume: "Vol 4. / Issue 09",
-        status: "archived",
-        dueLabel: "Pub Apr 15",
-        articleCount: 12,
-        progress: 100,
-        assignees: ["AL", "JI"],
-      },
-    ],
-  },
-]
-
-function getBadgeVariant(
-  status: PipelineStatus
-): React.ComponentProps<typeof Badge>["variant"] {
-  if (status === "active") {
-    return "outline"
-  }
-
-  if (status === "draft") {
-    return "secondary"
-  }
-
-  return "ghost"
-}
-
-function getAlertStyles(tone: AlertTone): { className: string; icon: React.JSX.Element } {
-  if (tone === "warning") {
-    return {
-      className: "border-l border-l-destructive/80 bg-muted/30",
-      icon: <CircleAlertIcon className="size-3.5 text-destructive" />,
-    }
-  }
-
-  return {
-    className: "border-l border-l-foreground/80 bg-muted/30",
-    icon: <CircleAlertIcon className="size-3.5 text-foreground" />,
-  }
-}
-
-export function EditorialPipelineBoard() {
-  return (
-    <section className="flex flex-col gap-6 border border-border/70 bg-background p-6 md:p-8">
-      <header className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
-        <div className="flex flex-col gap-1">
-          <h2 className="font-heading text-5xl leading-none tracking-tight uppercase">
-            Publication Issues
-          </h2>
-          <p className="text-[11px] font-semibold tracking-[0.22em] text-muted-foreground uppercase">
-            Editorial Pipeline Board
-          </p>
-        </div>
-        <div className="flex items-center gap-2">
-          <Button variant="outline" size="icon-sm">
-            <FilterIcon className="size-4" />
-          </Button>
-          <Button size="sm" className="px-4 text-[10px] font-semibold tracking-[0.18em]">
-            New Issue
-          </Button>
-        </div>
-      </header>
-
-      <Separator />
-
-      <div className="grid grid-cols-1 gap-6 xl:grid-cols-3">
-        {PIPELINE_COLUMNS.map((column) => (
-          <section key={column.key} className="flex flex-col gap-3">
-            <div className="grid grid-cols-[1fr_auto] items-end gap-3 border-b border-border/80 pb-2">
-              <h3 className="text-[10px] font-semibold tracking-[0.2em] text-foreground uppercase">
-                {column.title}
-              </h3>
-              <span className="inline-flex h-4 min-w-4 items-center justify-center bg-muted px-1 text-[9px] font-semibold text-muted-foreground">
-                {column.count}
-              </span>
-            </div>
-
-            <div className="flex flex-col gap-3">
-              {column.cards.map((card) => {
-                const statusVariant = getBadgeVariant(card.status)
-
-                return (
-                  <article
-                    key={card.title}
-                    className="flex flex-col gap-4 border border-border/60 bg-card p-4"
-                  >
-                    <div className="grid grid-cols-[1fr_auto] items-start gap-3">
-                      <div className="flex flex-col gap-1">
-                        <h4 className="font-heading text-4xl leading-none tracking-tight">
-                          {card.title}
-                        </h4>
-                        <p className="text-[10px] font-semibold tracking-[0.16em] text-muted-foreground uppercase">
-                          {card.volume}
-                        </p>
-                      </div>
-                      <Badge
-                        variant={statusVariant}
-                        className="px-2 py-0.5 text-[9px] tracking-[0.18em] uppercase"
-                      >
-                        {card.status}
-                      </Badge>
-                    </div>
-
-                    {card.alert ? (
-                      <div
-                        className={cn(
-                          "flex flex-col gap-1 px-2.5 py-2",
-                          getAlertStyles(card.alert.tone).className
-                        )}
-                      >
-                        <div className="flex items-center gap-1.5 text-[10px] font-semibold tracking-[0.14em] uppercase">
-                          {getAlertStyles(card.alert.tone).icon}
-                          <span>{card.alert.title}</span>
-                        </div>
-                        <p className="text-[11px] text-muted-foreground">{card.alert.message}</p>
-                      </div>
-                    ) : null}
-
-                    <div className="grid grid-cols-2 items-center gap-3 text-[10px] text-muted-foreground">
-                      <div className="flex items-center gap-1.5">
-                        <CalendarIcon className="size-3.5" />
-                        <span>{card.dueLabel}</span>
-                      </div>
-                      <div className="flex items-center justify-end gap-1.5">
-                        <FileTextIcon className="size-3.5" />
-                        <span>{card.articleCount} Articles</span>
-                      </div>
-                    </div>
-
-                    <Progress value={card.progress} className="gap-1.5">
-                      <div className="flex w-full items-center justify-between gap-2">
-                        <span className="text-[10px] font-semibold tracking-[0.18em] text-foreground uppercase">
-                          Editorial Progress
-                        </span>
-                        <ProgressValue className="m-0 text-[10px] font-semibold text-foreground">
-                          {(value) => `${value}%`}
-                        </ProgressValue>
-                      </div>
-                      <ProgressTrack className="bg-border/90" />
-                    </Progress>
-
-                    <footer className="grid grid-cols-[1fr_auto] items-center gap-3">
-                      <AvatarGroup className="space-x-0">
-                        {card.assignees.map((assignee) => (
-                          <Avatar
-                            key={assignee}
-                            size="sm"
-                            className="ring-0 after:border-border/70 [&+[data-slot=avatar]]:-ml-2"
-                          >
-                            <AvatarFallback className="bg-muted text-[9px] font-semibold tracking-wide text-muted-foreground">
-                              {assignee}
-                            </AvatarFallback>
-                          </Avatar>
-                        ))}
-                      </AvatarGroup>
-                      <Button
-                        type="button"
-                        variant="ghost"
-                        size="xs"
-                        className="h-auto px-0 text-[10px] font-semibold tracking-[0.18em] text-muted-foreground hover:bg-transparent hover:text-foreground"
-                      >
-                        View <ChevronRightIcon className="size-3.5" />
-                      </Button>
-                    </footer>
-                  </article>
-                )
-              })}
-            </div>
-          </section>
-        ))}
-      </div>
-    </section>
-  )
-}
diff --git a/apps/v4/app/(app)/(styles)/sera/preview-05/index.tsx b/apps/v4/app/(app)/(styles)/sera/preview-05/index.tsx
deleted file mode 100644
index 009f46240d..0000000000
--- a/apps/v4/app/(app)/(styles)/sera/preview-05/index.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { EditorialPipelineBoard } from "./components/editorial-pipeline-board"
-
-export function Preview05() {
-  return (
-    <div className="preview theme-taupe w-full flex-1 bg-muted font-sans ring-1 ring-foreground/5">
-      <div className="container py-8">
-        <EditorialPipelineBoard />
-      </div>
-    </div>
-  )
-}
diff --git a/apps/v4/public/r/styles/base-luma/dropdown-menu-example.json b/apps/v4/public/r/styles/base-luma/dropdown-menu-example.json
index 6f327c9541..f2a7112525 100644
--- a/apps/v4/public/r/styles/base-luma/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/base-luma/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-luma/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-luma/ui/avatar\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-luma/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-luma/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuSides />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>GitHub</DropdownMenuItem>\n          <DropdownMenuItem>Support</DropdownMenuItem>\n          <DropdownMenuItem disabled>API</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <DropdownMenu key={side}>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </DropdownMenuTrigger>\n            <DropdownMenuContent side={side}>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>Profile</DropdownMenuItem>\n                <DropdownMenuItem>Billing</DropdownMenuItem>\n                <DropdownMenuItem>Settings</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"UserIcon\"\n              tabler=\"IconUser\"\n              hugeicons=\"UserIcon\"\n              phosphor=\"UserIcon\"\n              remixicon=\"RiUserLine\"\n            />\n            Profile\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"CreditCardIcon\"\n              tabler=\"IconCreditCard\"\n              hugeicons=\"CreditCardIcon\"\n              phosphor=\"CreditCardIcon\"\n              remixicon=\"RiBankCardLine\"\n            />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n            Settings\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"LogOutIcon\"\n              tabler=\"IconLogout\"\n              hugeicons=\"LogoutIcon\"\n              phosphor=\"SignOutIcon\"\n              remixicon=\"RiLogoutBoxLine\"\n            />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            Log out\n            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuItem>Email</DropdownMenuItem>\n                  <DropdownMenuItem>Message</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>More...</DropdownMenuItem>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Checkboxes\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Radio Group\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Notifications\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Payment Method\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Actions\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"PencilIcon\"\n              tabler=\"IconPencil\"\n              hugeicons=\"EditIcon\"\n              phosphor=\"PencilIcon\"\n              remixicon=\"RiPencilLine\"\n            />\n            Edit\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"ShareIcon\"\n              phosphor=\"ShareIcon\"\n              remixicon=\"RiShareLine\"\n            />\n            Share\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ArchiveIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n            Archive\n          </DropdownMenuItem>\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"DeleteIcon\"\n              phosphor=\"TrashIcon\"\n              remixicon=\"RiDeleteBinLine\"\n            />\n            Delete\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <IconPlaceholder\n          lucide=\"LogOutIcon\"\n          tabler=\"IconLogout\"\n          hugeicons=\"LogoutIcon\"\n          phosphor=\"SignOutIcon\"\n          remixicon=\"RiLogoutBoxLine\"\n        />\n        Sign Out\n      </DropdownMenuItem>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"truncate text-xs text-muted-foreground\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                  remixicon=\"RiClipboardLine\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-luma/ui/avatar\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-luma/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-luma/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <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] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"truncate text-xs text-muted-foreground\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                  remixicon=\"RiClipboardLine\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-luma/field-example.json b/apps/v4/public/r/styles/base-luma/field-example.json
index 1368bb4a42..3218cede0c 100644
--- a/apps/v4/public/r/styles/base-luma/field-example.json
+++ b/apps/v4/public/r/styles/base-luma/field-example.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/base-luma/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-luma/components/example\"\nimport { Badge } from \"@/registry/base-luma/ui/badge\"\nimport { Checkbox } from \"@/registry/base-luma/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-luma/ui/field\"\nimport { Input } from \"@/registry/base-luma/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-luma/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/base-luma/ui/native-select\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-luma/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-luma/ui/select\"\nimport { Slider } from \"@/registry/base-luma/ui/slider\"\nimport { Switch } from \"@/registry/base-luma/ui/switch\"\nimport { Textarea } from \"@/registry/base-luma/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",
+      "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-luma/components/example\"\nimport { Badge } from \"@/registry/base-luma/ui/badge\"\nimport { Checkbox } from \"@/registry/base-luma/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-luma/ui/field\"\nimport { Input } from \"@/registry/base-luma/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-luma/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/base-luma/ui/native-select\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-luma/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-luma/ui/select\"\nimport { Slider } from \"@/registry/base-luma/ui/slider\"\nimport { Switch } from \"@/registry/base-luma/ui/switch\"\nimport { Textarea } from \"@/registry/base-luma/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\">\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\">Dark mode</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\">Compact view</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\">\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\">Invalid checkbox</FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\">\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\">Free Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\">Pro Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\">Enterprise</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        </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        </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            <FieldLabel htmlFor=\"switch-profile\">\n              Make profile visible to others\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldLabel htmlFor=\"switch-email\">\n              Show email on profile\n            </FieldLabel>\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-luma/select-example.json b/apps/v4/public/r/styles/base-luma/select-example.json
index a3edb28a31..04465a24b7 100644
--- a/apps/v4/public/r/styles/base-luma/select-example.json
+++ b/apps/v4/public/r/styles/base-luma/select-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-luma/examples/select-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-luma/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-luma/ui/field\"\nimport { Input } from \"@/registry/base-luma/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-luma/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-luma/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-luma/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectSides />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSides() {\n  const items = [\n    { label: \"Select\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Select key={side} items={items}>\n            <SelectTrigger className=\"w-28 capitalize\">\n              <SelectValue placeholder={side.replace(\"-\", \" \")} />\n            </SelectTrigger>\n            <SelectContent side={side} alignItemWithTrigger={false}>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartBarIcon\"\n            remixicon=\"RiBarChartLine\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport { Button } from \"@/registry/base-luma/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-luma/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-luma/ui/field\"\nimport { Input } from \"@/registry/base-luma/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-luma/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-luma/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-luma/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectSides />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSides() {\n  const items = [\n    { label: \"Select\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Select key={side} items={items}>\n            <SelectTrigger className=\"w-28 capitalize\">\n              <SelectValue placeholder={side.replace(\"-\", \" \")} />\n            </SelectTrigger>\n            <SelectContent side={side} alignItemWithTrigger={false}>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartBarIcon\"\n            remixicon=\"RiBarChartLine\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0 normal-case\">\n        <ItemTitle className=\"font-sans\">{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs font-normal tracking-normal\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-luma/switch-example.json b/apps/v4/public/r/styles/base-luma/switch-example.json
index 912e5b3437..e4619b3304 100644
--- a/apps/v4/public/r/styles/base-luma/switch-example.json
+++ b/apps/v4/public/r/styles/base-luma/switch-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-luma/examples/switch-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/base-luma/ui/field\"\nimport { Label } from \"@/registry/base-luma/ui/label\"\nimport { Switch } from \"@/registry/base-luma/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-luma/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/base-luma/ui/field\"\nimport { Label } from \"@/registry/base-luma/ui/label\"\nimport { Switch } from \"@/registry/base-luma/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchWithLabel />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
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 d5c687ed61..53b3517dac 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      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>GitHub</DropdownMenuItem>\n          <DropdownMenuItem>Support</DropdownMenuItem>\n          <DropdownMenuItem disabled>API</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <DropdownMenu key={side}>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </DropdownMenuTrigger>\n            <DropdownMenuContent side={side}>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>Profile</DropdownMenuItem>\n                <DropdownMenuItem>Billing</DropdownMenuItem>\n                <DropdownMenuItem>Settings</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"UserIcon\"\n              tabler=\"IconUser\"\n              hugeicons=\"UserIcon\"\n              phosphor=\"UserIcon\"\n              remixicon=\"RiUserLine\"\n            />\n            Profile\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"CreditCardIcon\"\n              tabler=\"IconCreditCard\"\n              hugeicons=\"CreditCardIcon\"\n              phosphor=\"CreditCardIcon\"\n              remixicon=\"RiBankCardLine\"\n            />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n            Settings\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"LogOutIcon\"\n              tabler=\"IconLogout\"\n              hugeicons=\"LogoutIcon\"\n              phosphor=\"SignOutIcon\"\n              remixicon=\"RiLogoutBoxLine\"\n            />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            Log out\n            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuItem>Email</DropdownMenuItem>\n                  <DropdownMenuItem>Message</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>More...</DropdownMenuItem>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Checkboxes\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Radio Group\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Notifications\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Payment Method\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Actions\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"PencilIcon\"\n              tabler=\"IconPencil\"\n              hugeicons=\"EditIcon\"\n              phosphor=\"PencilIcon\"\n              remixicon=\"RiPencilLine\"\n            />\n            Edit\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"ShareIcon\"\n              phosphor=\"ShareIcon\"\n              remixicon=\"RiShareLine\"\n            />\n            Share\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ArchiveIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n            Archive\n          </DropdownMenuItem>\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"DeleteIcon\"\n              phosphor=\"TrashIcon\"\n              remixicon=\"RiDeleteBinLine\"\n            />\n            Delete\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <IconPlaceholder\n          lucide=\"LogOutIcon\"\n          tabler=\"IconLogout\"\n          hugeicons=\"LogoutIcon\"\n          phosphor=\"SignOutIcon\"\n          remixicon=\"RiLogoutBoxLine\"\n        />\n        Sign Out\n      </DropdownMenuItem>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"truncate text-xs text-muted-foreground\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                  remixicon=\"RiClipboardLine\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "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] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"truncate text-xs text-muted-foreground\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                  remixicon=\"RiClipboardLine\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
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 4e5125ff4e..0ca06281a8 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 { RadioGroup, RadioGroupItem } 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",
+      "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 { RadioGroup, RadioGroupItem } 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\">\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\">Dark mode</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\">Compact view</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\">\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\">Invalid checkbox</FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\">\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\">Free Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\">Pro Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\">Enterprise</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        </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        </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            <FieldLabel htmlFor=\"switch-profile\">\n              Make profile visible to others\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldLabel htmlFor=\"switch-email\">\n              Show email on profile\n            </FieldLabel>\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/select-example.json b/apps/v4/public/r/styles/base-lyra/select-example.json
index 90e8fc3707..8374182832 100644
--- a/apps/v4/public/r/styles/base-lyra/select-example.json
+++ b/apps/v4/public/r/styles/base-lyra/select-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/select-example.tsx",
-      "content": "\"use client\"\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  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-lyra/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-lyra/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectSides />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSides() {\n  const items = [\n    { label: \"Select\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Select key={side} items={items}>\n            <SelectTrigger className=\"w-28 capitalize\">\n              <SelectValue placeholder={side.replace(\"-\", \" \")} />\n            </SelectTrigger>\n            <SelectContent side={side} alignItemWithTrigger={false}>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartBarIcon\"\n            remixicon=\"RiBarChartLine\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\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  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Input } from \"@/registry/base-lyra/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-lyra/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-lyra/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-lyra/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectSides />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSides() {\n  const items = [\n    { label: \"Select\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Select key={side} items={items}>\n            <SelectTrigger className=\"w-28 capitalize\">\n              <SelectValue placeholder={side.replace(\"-\", \" \")} />\n            </SelectTrigger>\n            <SelectContent side={side} alignItemWithTrigger={false}>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartBarIcon\"\n            remixicon=\"RiBarChartLine\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0 normal-case\">\n        <ItemTitle className=\"font-sans\">{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs font-normal tracking-normal\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-lyra/switch-example.json b/apps/v4/public/r/styles/base-lyra/switch-example.json
index f2f82984c2..5b816d373a 100644
--- a/apps/v4/public/r/styles/base-lyra/switch-example.json
+++ b/apps/v4/public/r/styles/base-lyra/switch-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-lyra/examples/switch-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport { Switch } from \"@/registry/base-lyra/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-lyra/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/base-lyra/ui/field\"\nimport { Label } from \"@/registry/base-lyra/ui/label\"\nimport { Switch } from \"@/registry/base-lyra/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchWithLabel />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
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 4f1f1c2b02..6240a1cd5c 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      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>GitHub</DropdownMenuItem>\n          <DropdownMenuItem>Support</DropdownMenuItem>\n          <DropdownMenuItem disabled>API</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <DropdownMenu key={side}>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </DropdownMenuTrigger>\n            <DropdownMenuContent side={side}>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>Profile</DropdownMenuItem>\n                <DropdownMenuItem>Billing</DropdownMenuItem>\n                <DropdownMenuItem>Settings</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"UserIcon\"\n              tabler=\"IconUser\"\n              hugeicons=\"UserIcon\"\n              phosphor=\"UserIcon\"\n              remixicon=\"RiUserLine\"\n            />\n            Profile\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"CreditCardIcon\"\n              tabler=\"IconCreditCard\"\n              hugeicons=\"CreditCardIcon\"\n              phosphor=\"CreditCardIcon\"\n              remixicon=\"RiBankCardLine\"\n            />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n            Settings\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"LogOutIcon\"\n              tabler=\"IconLogout\"\n              hugeicons=\"LogoutIcon\"\n              phosphor=\"SignOutIcon\"\n              remixicon=\"RiLogoutBoxLine\"\n            />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            Log out\n            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuItem>Email</DropdownMenuItem>\n                  <DropdownMenuItem>Message</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>More...</DropdownMenuItem>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Checkboxes\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Radio Group\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Notifications\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Payment Method\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Actions\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"PencilIcon\"\n              tabler=\"IconPencil\"\n              hugeicons=\"EditIcon\"\n              phosphor=\"PencilIcon\"\n              remixicon=\"RiPencilLine\"\n            />\n            Edit\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"ShareIcon\"\n              phosphor=\"ShareIcon\"\n              remixicon=\"RiShareLine\"\n            />\n            Share\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ArchiveIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n            Archive\n          </DropdownMenuItem>\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"DeleteIcon\"\n              phosphor=\"TrashIcon\"\n              remixicon=\"RiDeleteBinLine\"\n            />\n            Delete\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <IconPlaceholder\n          lucide=\"LogOutIcon\"\n          tabler=\"IconLogout\"\n          hugeicons=\"LogoutIcon\"\n          phosphor=\"SignOutIcon\"\n          remixicon=\"RiLogoutBoxLine\"\n        />\n        Sign Out\n      </DropdownMenuItem>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"truncate text-xs text-muted-foreground\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                  remixicon=\"RiClipboardLine\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "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] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"truncate text-xs text-muted-foreground\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                  remixicon=\"RiClipboardLine\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
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 9d0a006f50..02dd139d37 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 { RadioGroup, RadioGroupItem } 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",
+      "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 { RadioGroup, RadioGroupItem } 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\">\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\">Dark mode</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\">Compact view</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\">\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\">Invalid checkbox</FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\">\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\">Free Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\">Pro Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\">Enterprise</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        </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        </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            <FieldLabel htmlFor=\"switch-profile\">\n              Make profile visible to others\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldLabel htmlFor=\"switch-email\">\n              Show email on profile\n            </FieldLabel>\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/select-example.json b/apps/v4/public/r/styles/base-maia/select-example.json
index a32349482e..9d0d8c50db 100644
--- a/apps/v4/public/r/styles/base-maia/select-example.json
+++ b/apps/v4/public/r/styles/base-maia/select-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/select-example.tsx",
-      "content": "\"use client\"\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  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-maia/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-maia/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectSides />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSides() {\n  const items = [\n    { label: \"Select\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Select key={side} items={items}>\n            <SelectTrigger className=\"w-28 capitalize\">\n              <SelectValue placeholder={side.replace(\"-\", \" \")} />\n            </SelectTrigger>\n            <SelectContent side={side} alignItemWithTrigger={false}>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartBarIcon\"\n            remixicon=\"RiBarChartLine\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\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  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-maia/ui/field\"\nimport { Input } from \"@/registry/base-maia/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-maia/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-maia/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-maia/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectSides />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSides() {\n  const items = [\n    { label: \"Select\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Select key={side} items={items}>\n            <SelectTrigger className=\"w-28 capitalize\">\n              <SelectValue placeholder={side.replace(\"-\", \" \")} />\n            </SelectTrigger>\n            <SelectContent side={side} alignItemWithTrigger={false}>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartBarIcon\"\n            remixicon=\"RiBarChartLine\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0 normal-case\">\n        <ItemTitle className=\"font-sans\">{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs font-normal tracking-normal\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-maia/switch-example.json b/apps/v4/public/r/styles/base-maia/switch-example.json
index b672cda735..35023809ec 100644
--- a/apps/v4/public/r/styles/base-maia/switch-example.json
+++ b/apps/v4/public/r/styles/base-maia/switch-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-maia/examples/switch-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/base-maia/ui/field\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport { Switch } from \"@/registry/base-maia/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-maia/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/base-maia/ui/field\"\nimport { Label } from \"@/registry/base-maia/ui/label\"\nimport { Switch } from \"@/registry/base-maia/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchWithLabel />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
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 f33ff0adc6..3adeee54bc 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      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>GitHub</DropdownMenuItem>\n          <DropdownMenuItem>Support</DropdownMenuItem>\n          <DropdownMenuItem disabled>API</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <DropdownMenu key={side}>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </DropdownMenuTrigger>\n            <DropdownMenuContent side={side}>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>Profile</DropdownMenuItem>\n                <DropdownMenuItem>Billing</DropdownMenuItem>\n                <DropdownMenuItem>Settings</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"UserIcon\"\n              tabler=\"IconUser\"\n              hugeicons=\"UserIcon\"\n              phosphor=\"UserIcon\"\n              remixicon=\"RiUserLine\"\n            />\n            Profile\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"CreditCardIcon\"\n              tabler=\"IconCreditCard\"\n              hugeicons=\"CreditCardIcon\"\n              phosphor=\"CreditCardIcon\"\n              remixicon=\"RiBankCardLine\"\n            />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n            Settings\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"LogOutIcon\"\n              tabler=\"IconLogout\"\n              hugeicons=\"LogoutIcon\"\n              phosphor=\"SignOutIcon\"\n              remixicon=\"RiLogoutBoxLine\"\n            />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            Log out\n            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuItem>Email</DropdownMenuItem>\n                  <DropdownMenuItem>Message</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>More...</DropdownMenuItem>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Checkboxes\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Radio Group\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Notifications\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Payment Method\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Actions\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"PencilIcon\"\n              tabler=\"IconPencil\"\n              hugeicons=\"EditIcon\"\n              phosphor=\"PencilIcon\"\n              remixicon=\"RiPencilLine\"\n            />\n            Edit\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"ShareIcon\"\n              phosphor=\"ShareIcon\"\n              remixicon=\"RiShareLine\"\n            />\n            Share\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ArchiveIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n            Archive\n          </DropdownMenuItem>\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"DeleteIcon\"\n              phosphor=\"TrashIcon\"\n              remixicon=\"RiDeleteBinLine\"\n            />\n            Delete\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <IconPlaceholder\n          lucide=\"LogOutIcon\"\n          tabler=\"IconLogout\"\n          hugeicons=\"LogoutIcon\"\n          phosphor=\"SignOutIcon\"\n          remixicon=\"RiLogoutBoxLine\"\n        />\n        Sign Out\n      </DropdownMenuItem>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"truncate text-xs text-muted-foreground\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                  remixicon=\"RiClipboardLine\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "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] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"truncate text-xs text-muted-foreground\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                  remixicon=\"RiClipboardLine\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
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 f39cf7f651..65c3f43eac 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 { RadioGroup, RadioGroupItem } 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",
+      "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 { RadioGroup, RadioGroupItem } 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\">\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\">Dark mode</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\">Compact view</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\">\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\">Invalid checkbox</FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\">\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\">Free Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\">Pro Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\">Enterprise</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        </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        </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            <FieldLabel htmlFor=\"switch-profile\">\n              Make profile visible to others\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldLabel htmlFor=\"switch-email\">\n              Show email on profile\n            </FieldLabel>\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/select-example.json b/apps/v4/public/r/styles/base-mira/select-example.json
index 7304503416..7cb56b9bc2 100644
--- a/apps/v4/public/r/styles/base-mira/select-example.json
+++ b/apps/v4/public/r/styles/base-mira/select-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/select-example.tsx",
-      "content": "\"use client\"\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  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-mira/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-mira/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectSides />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSides() {\n  const items = [\n    { label: \"Select\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Select key={side} items={items}>\n            <SelectTrigger className=\"w-28 capitalize\">\n              <SelectValue placeholder={side.replace(\"-\", \" \")} />\n            </SelectTrigger>\n            <SelectContent side={side} alignItemWithTrigger={false}>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartBarIcon\"\n            remixicon=\"RiBarChartLine\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\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  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-mira/ui/field\"\nimport { Input } from \"@/registry/base-mira/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-mira/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-mira/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-mira/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectSides />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSides() {\n  const items = [\n    { label: \"Select\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Select key={side} items={items}>\n            <SelectTrigger className=\"w-28 capitalize\">\n              <SelectValue placeholder={side.replace(\"-\", \" \")} />\n            </SelectTrigger>\n            <SelectContent side={side} alignItemWithTrigger={false}>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartBarIcon\"\n            remixicon=\"RiBarChartLine\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0 normal-case\">\n        <ItemTitle className=\"font-sans\">{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs font-normal tracking-normal\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-mira/switch-example.json b/apps/v4/public/r/styles/base-mira/switch-example.json
index 61bdcc5e15..0978a78ef2 100644
--- a/apps/v4/public/r/styles/base-mira/switch-example.json
+++ b/apps/v4/public/r/styles/base-mira/switch-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-mira/examples/switch-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/base-mira/ui/field\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport { Switch } from \"@/registry/base-mira/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-mira/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/base-mira/ui/field\"\nimport { Label } from \"@/registry/base-mira/ui/label\"\nimport { Switch } from \"@/registry/base-mira/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchWithLabel />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
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 75e86ac8e7..b84b89378c 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      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>GitHub</DropdownMenuItem>\n          <DropdownMenuItem>Support</DropdownMenuItem>\n          <DropdownMenuItem disabled>API</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <DropdownMenu key={side}>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </DropdownMenuTrigger>\n            <DropdownMenuContent side={side}>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>Profile</DropdownMenuItem>\n                <DropdownMenuItem>Billing</DropdownMenuItem>\n                <DropdownMenuItem>Settings</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"UserIcon\"\n              tabler=\"IconUser\"\n              hugeicons=\"UserIcon\"\n              phosphor=\"UserIcon\"\n              remixicon=\"RiUserLine\"\n            />\n            Profile\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"CreditCardIcon\"\n              tabler=\"IconCreditCard\"\n              hugeicons=\"CreditCardIcon\"\n              phosphor=\"CreditCardIcon\"\n              remixicon=\"RiBankCardLine\"\n            />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n            Settings\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"LogOutIcon\"\n              tabler=\"IconLogout\"\n              hugeicons=\"LogoutIcon\"\n              phosphor=\"SignOutIcon\"\n              remixicon=\"RiLogoutBoxLine\"\n            />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            Log out\n            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuItem>Email</DropdownMenuItem>\n                  <DropdownMenuItem>Message</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>More...</DropdownMenuItem>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Checkboxes\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Radio Group\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Notifications\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Payment Method\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Actions\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"PencilIcon\"\n              tabler=\"IconPencil\"\n              hugeicons=\"EditIcon\"\n              phosphor=\"PencilIcon\"\n              remixicon=\"RiPencilLine\"\n            />\n            Edit\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"ShareIcon\"\n              phosphor=\"ShareIcon\"\n              remixicon=\"RiShareLine\"\n            />\n            Share\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ArchiveIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n            Archive\n          </DropdownMenuItem>\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"DeleteIcon\"\n              phosphor=\"TrashIcon\"\n              remixicon=\"RiDeleteBinLine\"\n            />\n            Delete\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <IconPlaceholder\n          lucide=\"LogOutIcon\"\n          tabler=\"IconLogout\"\n          hugeicons=\"LogoutIcon\"\n          phosphor=\"SignOutIcon\"\n          remixicon=\"RiLogoutBoxLine\"\n        />\n        Sign Out\n      </DropdownMenuItem>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"truncate text-xs text-muted-foreground\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                  remixicon=\"RiClipboardLine\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "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] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"truncate text-xs text-muted-foreground\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                  remixicon=\"RiClipboardLine\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
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 63c41ca947..badc4cbc04 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 { RadioGroup, RadioGroupItem } 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",
+      "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 { RadioGroup, RadioGroupItem } 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\">\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\">Dark mode</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\">Compact view</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\">\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\">Invalid checkbox</FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\">\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\">Free Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\">Pro Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\">Enterprise</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        </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        </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            <FieldLabel htmlFor=\"switch-profile\">\n              Make profile visible to others\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldLabel htmlFor=\"switch-email\">\n              Show email on profile\n            </FieldLabel>\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/select-example.json b/apps/v4/public/r/styles/base-nova/select-example.json
index 0c26dfd394..747003aa96 100644
--- a/apps/v4/public/r/styles/base-nova/select-example.json
+++ b/apps/v4/public/r/styles/base-nova/select-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/select-example.tsx",
-      "content": "\"use client\"\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  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-nova/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-nova/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectSides />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSides() {\n  const items = [\n    { label: \"Select\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Select key={side} items={items}>\n            <SelectTrigger className=\"w-28 capitalize\">\n              <SelectValue placeholder={side.replace(\"-\", \" \")} />\n            </SelectTrigger>\n            <SelectContent side={side} alignItemWithTrigger={false}>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartBarIcon\"\n            remixicon=\"RiBarChartLine\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\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  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-nova/ui/field\"\nimport { Input } from \"@/registry/base-nova/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-nova/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-nova/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-nova/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectSides />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSides() {\n  const items = [\n    { label: \"Select\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Select key={side} items={items}>\n            <SelectTrigger className=\"w-28 capitalize\">\n              <SelectValue placeholder={side.replace(\"-\", \" \")} />\n            </SelectTrigger>\n            <SelectContent side={side} alignItemWithTrigger={false}>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartBarIcon\"\n            remixicon=\"RiBarChartLine\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0 normal-case\">\n        <ItemTitle className=\"font-sans\">{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs font-normal tracking-normal\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-nova/switch-example.json b/apps/v4/public/r/styles/base-nova/switch-example.json
index a37bef889b..2b1a4fd0ae 100644
--- a/apps/v4/public/r/styles/base-nova/switch-example.json
+++ b/apps/v4/public/r/styles/base-nova/switch-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-nova/examples/switch-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/base-nova/ui/field\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport { Switch } from \"@/registry/base-nova/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-nova/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/base-nova/ui/field\"\nimport { Label } from \"@/registry/base-nova/ui/label\"\nimport { Switch } from \"@/registry/base-nova/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchWithLabel />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-sera/accordion.json b/apps/v4/public/r/styles/base-sera/accordion.json
index 8d4615b611..a50754e735 100644
--- a/apps/v4/public/r/styles/base-sera/accordion.json
+++ b/apps/v4/public/r/styles/base-sera/accordion.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-sera/ui/accordion.tsx",
-      "content": "import { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 rounded-none border border-transparent py-4 text-left text-sm font-semibold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          remixicon=\"RiArrowUpSLine\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "import { Accordion as AccordionPrimitive } from \"@base-ui/react/accordion\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Trigger.Props) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 rounded-none border border-transparent py-4 text-left text-sm font-semibold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-3.5 **:data-[slot=accordion-trigger-icon]:text-muted-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          remixicon=\"RiArrowUpSLine\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionPrimitive.Panel.Props) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      className=\"overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-sera/breadcrumb.json b/apps/v4/public/r/styles/base-sera/breadcrumb.json
index 187d48a499..84a9bfae7d 100644
--- a/apps/v4/public/r/styles/base-sera/breadcrumb.json
+++ b/apps/v4/public/r/styles/base-sera/breadcrumb.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-sera/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\"transition-colors hover:text-foreground\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"font-normal text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-5 items-center justify-center [&>svg]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n        remixicon=\"RiMoreLine\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "content": "import * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-xs tracking-wide wrap-break-word text-muted-foreground uppercase sm:gap-2.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"a\">) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\"transition-colors hover:text-foreground\", className),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"breadcrumb-link\",\n    },\n  })\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"font-normal text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-5 items-center justify-center [&>svg]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n        remixicon=\"RiMoreLine\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-sera/button-group.json b/apps/v4/public/r/styles/base-sera/button-group.json
index dfe43e95b0..0aa153ce08 100644
--- a/apps/v4/public/r/styles/base-sera/button-group.json
+++ b/apps/v4/public/r/styles/base-sera/button-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-sera/ui/button-group.tsx",
-      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 *:data-[slot=input]:px-4 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-border has-[>[data-variant=outline]]:*:data-[slot=input-group]:px-2.5 has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-border has-[>[data-variant=outline]]:*:[[role=combobox]]:px-2.5 has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-ring has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-ring has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:[&>input]:border-border has-[>[data-variant=outline]]:[&>input:focus-visible]:border-ring\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0\",\n        vertical:\n          \"flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"flex items-center gap-2 border border-transparent border-b-input bg-transparent px-2.5 text-xs font-semibold uppercase group-has-[>[data-variant=outline]]/button-group:border-border [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"button-group-text\",\n    },\n  })\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
+      "content": "import { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 *:data-[slot=input]:px-4 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-border has-[>[data-variant=outline]]:*:data-[slot=input-group]:px-2.5 has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-border has-[>[data-variant=outline]]:*:[[role=combobox]]:px-2.5 has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-ring has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-ring has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:[&>input]:border-border has-[>[data-variant=outline]]:[&>input:focus-visible]:border-ring\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"*:data-slot:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none! [&>[data-slot]~[data-slot]]:rounded-l-none [&>[data-slot]~[data-slot]]:border-l-0\",\n        vertical:\n          \"flex-col *:data-slot:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none! [&>[data-slot]~[data-slot]]:rounded-t-none [&>[data-slot]~[data-slot]]:border-t-0\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"flex items-center gap-2 border border-transparent border-b-input bg-transparent px-2.5 text-xs font-semibold uppercase group-has-[>[data-variant=outline]]/button-group:border-border [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"button-group-text\",\n    },\n  })\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-sera/button.json b/apps/v4/public/r/styles/base-sera/button.json
index 82d3f27695..f0c4a2371b 100644
--- a/apps/v4/public/r/styles/base-sera/button.json
+++ b/apps/v4/public/r/styles/base-sera/button.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-sera/ui/button.tsx",
-      "content": "import { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-transparent hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-input/30\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-10 gap-1.5 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4\",\n        xs: \"h-7 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-9 gap-1 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        lg: \"h-11 gap-1.5 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5\",\n        icon: \"size-10\",\n        \"icon-xs\": \"size-7 [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-9\",\n        \"icon-lg\": \"size-11\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
+      "content": "import { Button as ButtonPrimitive } from \"@base-ui/react/button\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-transparent hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-input/30\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-10 gap-1.5 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4\",\n        xs: \"h-7 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-9 gap-1 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        lg: \"h-11 gap-1.5 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5\",\n        icon: \"size-10\",\n        \"icon-xs\": \"size-7 [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-9\",\n        \"icon-lg\": \"size-11\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {\n  return (\n    <ButtonPrimitive\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-sera/combobox.json b/apps/v4/public/r/styles/base-sera/combobox.json
index b1cff7c2cc..6b0d0253b6 100644
--- a/apps/v4/public/r/styles/base-sera/combobox.json
+++ b/apps/v4/public/r/styles/base-sera/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-sera/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-sera/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"pointer-events-none size-4 text-muted-foreground\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        remixicon=\"RiCloseLine\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            render={<ComboboxTrigger />}\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          />\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"cn-menu-target cn-menu-translucent group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1.5 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-transparent *:data-[slot=input-group]:bg-transparent *:data-[slot=input-group]:px-2.5 *:data-[slot=input-group]:focus-within:border-transparent data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1.5 overflow-y-auto overscroll-contain p-1.5 data-empty:p-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={\n          <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n        }\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\n        \"px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"-mx-1.5 my-1.5 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\n        \"flex min-h-10 flex-wrap items-center gap-1.5 rounded-none border border-transparent border-b-input bg-transparent bg-clip-padding px-0 py-1.5 text-sm transition-[color,border-color] focus-within:border-b-ring has-aria-invalid:border-b-destructive has-data-[slot=combobox-chip]:px-0 dark:has-aria-invalid:border-b-destructive/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-none bg-muted px-2 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            remixicon=\"RiCloseLine\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\"min-w-16 flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/base-sera/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-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=\"pointer-events-none size-3.5 text-muted-foreground\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        remixicon=\"RiCloseLine\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            render={<ComboboxTrigger />}\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          />\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"cn-menu-target cn-menu-translucent group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1.5 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-transparent *:data-[slot=input-group]:bg-transparent *:data-[slot=input-group]:px-2.5 *:data-[slot=input-group]:focus-within:border-transparent data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1.5 overflow-y-auto overscroll-contain p-1.5 data-empty:p-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium tracking-wider uppercase outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={\n          <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n        }\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\n        \"px-3 py-2 text-[0.625rem] tracking-wider text-muted-foreground uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"-mx-1.5 my-1.5 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\n        \"flex min-h-10 flex-wrap items-center gap-1.5 rounded-none border border-transparent border-b-input bg-transparent bg-clip-padding px-0 py-1.5 text-sm transition-[color,border-color] focus-within:border-b-ring has-aria-invalid:border-b-destructive has-data-[slot=combobox-chip]:px-0 dark:has-aria-invalid:border-b-destructive/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-none bg-muted px-2 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            remixicon=\"RiCloseLine\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\"min-w-16 flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-sera/command.json b/apps/v4/public/r/styles/base-sera/command.json
index 03de305b3e..700a52f998 100644
--- a/apps/v4/public/r/styles/base-sera/command.json
+++ b/apps/v4/public/r/styles/base-sera/command.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-sera/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-sera/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/base-sera/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex size-full flex-col overflow-hidden bg-popover text-popover-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, \"children\"> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n  children: React.ReactNode\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"top-1/3 translate-y-0 overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1\">\n      <InputGroup className=\"border-transparent border-b-input bg-transparent px-3\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full px-2 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden p-1.5 text-foreground **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-[0.625rem] **:[[cmdk-group-heading]]:font-semibold **:[[cmdk-group-heading]]:tracking-wider **:[[cmdk-group-heading]]:text-foreground **:[[cmdk-group-heading]]:uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"my-1 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"group/command-item relative flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        phosphor=\"CheckIcon\"\n        remixicon=\"RiCheckLine\"\n        className=\"ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/base-sera/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/base-sera/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex size-full flex-col overflow-hidden bg-popover text-popover-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: Omit<React.ComponentProps<typeof Dialog>, \"children\"> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n  children: React.ReactNode\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"top-1/3 translate-y-0 overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1\">\n      <InputGroup className=\"border-transparent border-b-input bg-transparent px-3\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full px-2 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-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 overflow-x-hidden overflow-y-auto outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden p-1.5 text-foreground **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-[0.625rem] **:[[cmdk-group-heading]]:font-semibold **:[[cmdk-group-heading]]:tracking-wider **:[[cmdk-group-heading]]:text-foreground **:[[cmdk-group-heading]]:uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"my-1 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"group/command-item relative flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 data-selected:*:[svg]:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        phosphor=\"CheckIcon\"\n        remixicon=\"RiCheckLine\"\n        className=\"ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-sera/context-menu.json b/apps/v4/public/r/styles/base-sera/context-menu.json
index 2e06947ebc..16d94d8b50 100644
--- a/apps/v4/public/r/styles/base-sera/context-menu.json
+++ b/apps/v4/public/r/styles/base-sera/context-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-sera/ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<\n    ContextMenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"cn-menu-target cn-menu-translucent z-50 max-h-(--available-height) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase data-inset:pl-9.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: ContextMenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/context-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\n  return (\n    <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        className=\"cn-rtl-flip ml-auto\"\n      />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  ...props\n}: React.ComponentProps<typeof ContextMenuContent>) {\n  return (\n    <ContextMenuContent\n      data-slot=\"context-menu-sub-content\"\n      className=\"cn-menu-target cn-menu-translucent shadow-md\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2\">\n        <ContextMenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </ContextMenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: ContextMenuPrimitive.RadioGroup.Props) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2\">\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: ContextMenuPrimitive.Separator.Props) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"-mx-1.5 my-1.5 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"@base-ui/react/context-menu\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({ ...props }: ContextMenuPrimitive.Root.Props) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuPortal({ ...props }: ContextMenuPrimitive.Portal.Props) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: ContextMenuPrimitive.Trigger.Props) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  align = \"start\",\n  alignOffset = 4,\n  side = \"right\",\n  sideOffset = 0,\n  ...props\n}: ContextMenuPrimitive.Popup.Props &\n  Pick<\n    ContextMenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <ContextMenuPrimitive.Popup\n          data-slot=\"context-menu-content\"\n          className={cn(\n            \"cn-menu-target cn-menu-translucent z-50 max-h-(--available-height) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </ContextMenuPrimitive.Positioner>\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuGroup({ ...props }: ContextMenuPrimitive.Group.Props) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: ContextMenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.GroupLabel\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase data-inset:pl-9.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: ContextMenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/context-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSub({ ...props }: ContextMenuPrimitive.SubmenuRoot.Props) {\n  return (\n    <ContextMenuPrimitive.SubmenuRoot data-slot=\"context-menu-sub\" {...props} />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: ContextMenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubmenuTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center rounded-none px-3 py-2 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        className=\"cn-rtl-flip ml-auto\"\n      />\n    </ContextMenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  ...props\n}: React.ComponentProps<typeof ContextMenuContent>) {\n  return (\n    <ContextMenuContent\n      data-slot=\"context-menu-sub-content\"\n      className=\"cn-menu-target cn-menu-translucent shadow-md\"\n      side=\"right\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: ContextMenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2\">\n        <ContextMenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </ContextMenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: ContextMenuPrimitive.RadioGroup.Props) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: ContextMenuPrimitive.RadioItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2\">\n        <ContextMenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </ContextMenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: ContextMenuPrimitive.Separator.Props) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"-mx-1.5 my-1.5 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-sera/dropdown-menu-example.json b/apps/v4/public/r/styles/base-sera/dropdown-menu-example.json
index ef038a1807..12d8d1772b 100644
--- a/apps/v4/public/r/styles/base-sera/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/base-sera/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/base-sera/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-sera/ui/avatar\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-sera/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuSides />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>GitHub</DropdownMenuItem>\n          <DropdownMenuItem>Support</DropdownMenuItem>\n          <DropdownMenuItem disabled>API</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <DropdownMenu key={side}>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </DropdownMenuTrigger>\n            <DropdownMenuContent side={side}>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>Profile</DropdownMenuItem>\n                <DropdownMenuItem>Billing</DropdownMenuItem>\n                <DropdownMenuItem>Settings</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"UserIcon\"\n              tabler=\"IconUser\"\n              hugeicons=\"UserIcon\"\n              phosphor=\"UserIcon\"\n              remixicon=\"RiUserLine\"\n            />\n            Profile\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"CreditCardIcon\"\n              tabler=\"IconCreditCard\"\n              hugeicons=\"CreditCardIcon\"\n              phosphor=\"CreditCardIcon\"\n              remixicon=\"RiBankCardLine\"\n            />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n            Settings\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"LogOutIcon\"\n              tabler=\"IconLogout\"\n              hugeicons=\"LogoutIcon\"\n              phosphor=\"SignOutIcon\"\n              remixicon=\"RiLogoutBoxLine\"\n            />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            Log out\n            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuItem>Email</DropdownMenuItem>\n                  <DropdownMenuItem>Message</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>More...</DropdownMenuItem>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Checkboxes\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Radio Group\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Notifications\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Payment Method\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Actions\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"PencilIcon\"\n              tabler=\"IconPencil\"\n              hugeicons=\"EditIcon\"\n              phosphor=\"PencilIcon\"\n              remixicon=\"RiPencilLine\"\n            />\n            Edit\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"ShareIcon\"\n              phosphor=\"ShareIcon\"\n              remixicon=\"RiShareLine\"\n            />\n            Share\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ArchiveIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n            Archive\n          </DropdownMenuItem>\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"DeleteIcon\"\n              phosphor=\"TrashIcon\"\n              remixicon=\"RiDeleteBinLine\"\n            />\n            Delete\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <IconPlaceholder\n          lucide=\"LogOutIcon\"\n          tabler=\"IconLogout\"\n          hugeicons=\"LogoutIcon\"\n          phosphor=\"SignOutIcon\"\n          remixicon=\"RiLogoutBoxLine\"\n        />\n        Sign Out\n      </DropdownMenuItem>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"truncate text-xs text-muted-foreground\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                  remixicon=\"RiClipboardLine\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/base-sera/ui/avatar\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-sera/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuSides />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>GitHub</DropdownMenuItem>\n          <DropdownMenuItem>Support</DropdownMenuItem>\n          <DropdownMenuItem disabled>API</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <DropdownMenu key={side}>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </DropdownMenuTrigger>\n            <DropdownMenuContent side={side}>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>Profile</DropdownMenuItem>\n                <DropdownMenuItem>Billing</DropdownMenuItem>\n                <DropdownMenuItem>Settings</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"UserIcon\"\n              tabler=\"IconUser\"\n              hugeicons=\"UserIcon\"\n              phosphor=\"UserIcon\"\n              remixicon=\"RiUserLine\"\n            />\n            Profile\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"CreditCardIcon\"\n              tabler=\"IconCreditCard\"\n              hugeicons=\"CreditCardIcon\"\n              phosphor=\"CreditCardIcon\"\n              remixicon=\"RiBankCardLine\"\n            />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n            Settings\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"LogOutIcon\"\n              tabler=\"IconLogout\"\n              hugeicons=\"LogoutIcon\"\n              phosphor=\"SignOutIcon\"\n              remixicon=\"RiLogoutBoxLine\"\n            />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            Log out\n            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuItem>Email</DropdownMenuItem>\n                  <DropdownMenuItem>Message</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>More...</DropdownMenuItem>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Checkboxes\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Radio Group\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Notifications\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Payment Method\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Actions\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"PencilIcon\"\n              tabler=\"IconPencil\"\n              hugeicons=\"EditIcon\"\n              phosphor=\"PencilIcon\"\n              remixicon=\"RiPencilLine\"\n            />\n            Edit\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"ShareIcon\"\n              phosphor=\"ShareIcon\"\n              remixicon=\"RiShareLine\"\n            />\n            Share\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ArchiveIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n            Archive\n          </DropdownMenuItem>\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"DeleteIcon\"\n              phosphor=\"TrashIcon\"\n              remixicon=\"RiDeleteBinLine\"\n            />\n            Delete\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <IconPlaceholder\n          lucide=\"LogOutIcon\"\n          tabler=\"IconLogout\"\n          hugeicons=\"LogoutIcon\"\n          phosphor=\"SignOutIcon\"\n          remixicon=\"RiLogoutBoxLine\"\n        />\n        Sign Out\n      </DropdownMenuItem>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                className=\"h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"truncate text-xs text-muted-foreground\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                  remixicon=\"RiClipboardLine\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-sera/dropdown-menu.json b/apps/v4/public/r/styles/base-sera/dropdown-menu.json
index afa284dc77..366abcae76 100644
--- a/apps/v4/public/r/styles/base-sera/dropdown-menu.json
+++ b/apps/v4/public/r/styles/base-sera/dropdown-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-sera/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"cn-menu-target cn-menu-translucent z-50 max-h-(--available-height) w-(--anchor-width) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase data-inset:pl-9.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        className=\"cn-rtl-flip ml-auto\"\n      />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  align = \"start\",\n  alignOffset = -3,\n  side = \"right\",\n  sideOffset = 0,\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"cn-menu-target cn-menu-translucent w-auto min-w-36 rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n  return (\n    <MenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: MenuPrimitive.RadioItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"-mx-1.5 my-1.5 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({ ...props }: MenuPrimitive.Root.Props) {\n  return <MenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({ ...props }: MenuPrimitive.Portal.Props) {\n  return <MenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n}\n\nfunction DropdownMenuTrigger({ ...props }: MenuPrimitive.Trigger.Props) {\n  return <MenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />\n}\n\nfunction DropdownMenuContent({\n  align = \"start\",\n  alignOffset = 0,\n  side = \"bottom\",\n  sideOffset = 4,\n  className,\n  ...props\n}: MenuPrimitive.Popup.Props &\n  Pick<\n    MenuPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\"\n  >) {\n  return (\n    <MenuPrimitive.Portal>\n      <MenuPrimitive.Positioner\n        className=\"isolate z-50 outline-none\"\n        align={align}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <MenuPrimitive.Popup\n          data-slot=\"dropdown-menu-content\"\n          className={cn(\n            \"cn-menu-target cn-menu-translucent z-50 max-h-(--available-height) w-(--anchor-width) min-w-48 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </MenuPrimitive.Positioner>\n    </MenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({ ...props }: MenuPrimitive.Group.Props) {\n  return <MenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: MenuPrimitive.GroupLabel.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.GroupLabel\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase data-inset:pl-9.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: MenuPrimitive.Item.Props & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 data-[variant=destructive]:*:[svg]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({ ...props }: MenuPrimitive.SubmenuRoot.Props) {\n  return <MenuPrimitive.SubmenuRoot data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: MenuPrimitive.SubmenuTrigger.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.SubmenuTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        className=\"cn-rtl-flip ml-auto\"\n      />\n    </MenuPrimitive.SubmenuTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  align = \"start\",\n  alignOffset = -3,\n  side = \"right\",\n  sideOffset = 0,\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"cn-menu-target cn-menu-translucent w-auto min-w-36 rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      align={align}\n      alignOffset={alignOffset}\n      side={side}\n      sideOffset={sideOffset}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({ ...props }: MenuPrimitive.RadioGroup.Props) {\n  return (\n    <MenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: MenuPrimitive.RadioItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: MenuPrimitive.Separator.Props) {\n  return (\n    <MenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"-mx-1.5 my-1.5 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-sera/field-example.json b/apps/v4/public/r/styles/base-sera/field-example.json
index e7ad9ea655..1d7436e9f2 100644
--- a/apps/v4/public/r/styles/base-sera/field-example.json
+++ b/apps/v4/public/r/styles/base-sera/field-example.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/base-sera/examples/field-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Badge } from \"@/registry/base-sera/ui/badge\"\nimport { Checkbox } from \"@/registry/base-sera/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-sera/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/base-sera/ui/native-select\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-sera/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-sera/ui/select\"\nimport { Slider } from \"@/registry/base-sera/ui/slider\"\nimport { Switch } from \"@/registry/base-sera/ui/switch\"\nimport { Textarea } from \"@/registry/base-sera/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  const basicItems = [\n    { label: \"Choose an option\", value: null },\n    { label: \"Option 1\", value: \"option1\" },\n    { label: \"Option 2\", value: \"option2\" },\n    { label: \"Option 3\", value: \"option3\" },\n  ]\n  const countryItems = [\n    { label: \"Select your country\", value: null },\n    { label: \"United States\", value: \"us\" },\n    { label: \"United Kingdom\", value: \"uk\" },\n    { label: \"Canada\", value: \"ca\" },\n  ]\n  const timezoneItems = [\n    { label: \"Select timezone\", value: null },\n    { label: \"UTC\", value: \"utc\" },\n    { label: \"Eastern Time\", value: \"est\" },\n    { label: \"Pacific Time\", value: \"pst\" },\n  ]\n  const invalidItems = [\n    { label: \"This field has an error\", value: null },\n    { label: \"Option 1\", value: \"option1\" },\n    { label: \"Option 2\", value: \"option2\" },\n    { label: \"Option 3\", value: \"option3\" },\n  ]\n  const disabledItems = [\n    { label: \"Cannot select\", value: null },\n    { label: \"Option 1\", value: \"option1\" },\n    { label: \"Option 2\", value: \"option2\" },\n    { label: \"Option 3\", value: \"option3\" },\n  ]\n\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select items={basicItems}>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {basicItems.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select items={countryItems}>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {countryItems.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select items={timezoneItems}>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {timezoneItems.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select items={invalidItems}>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {invalidItems.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select items={disabledItems} disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {disabledItems.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={(value) => setVolume(value as number[])}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={(value) => setBrightness(value as number[])}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={(value) => setTemperature(value as number[])}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={(value) => setPriceRange(value as number[])}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={(value) => setColorBalance(value as number[])}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction HorizontalFields() {\n  const basicItems = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Orange\", value: \"orange\" },\n  ]\n\n  return (\n    <Example title=\"Horizontal Fields\">\n      <FieldGroup className=\"**:data-[slot=field-content]:min-w-48\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-input\">Username</FieldLabel>\n            <FieldDescription>Enter your preferred username.</FieldDescription>\n          </FieldContent>\n          <Input id=\"horizontal-input\" placeholder=\"johndoe\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-textarea\">Bio</FieldLabel>\n            <FieldDescription>\n              Write a short description about yourself.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"horizontal-textarea\"\n            placeholder=\"Tell us about yourself...\"\n          />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-switch\">\n              Email Notifications\n            </FieldLabel>\n            <FieldDescription>\n              Receive email updates about your account.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"horizontal-switch\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-select\">Favorite Fruit</FieldLabel>\n            <FieldDescription>Choose your favorite fruit.</FieldDescription>\n          </FieldContent>\n          <Select items={basicItems}>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {basicItems.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-native-select\">Country</FieldLabel>\n            <FieldDescription>Select your country.</FieldDescription>\n          </FieldContent>\n          <NativeSelect id=\"horizontal-native-select\">\n            <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-slider\">Volume</FieldLabel>\n            <FieldDescription>Adjust the volume level.</FieldDescription>\n          </FieldContent>\n          <Slider id=\"horizontal-slider\" defaultValue={[50]} max={100} />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Badge } from \"@/registry/base-sera/ui/badge\"\nimport { Checkbox } from \"@/registry/base-sera/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/base-sera/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/base-sera/ui/native-select\"\nimport { RadioGroup, RadioGroupItem } from \"@/registry/base-sera/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-sera/ui/select\"\nimport { Slider } from \"@/registry/base-sera/ui/slider\"\nimport { Switch } from \"@/registry/base-sera/ui/switch\"\nimport { Textarea } from \"@/registry/base-sera/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  const basicItems = [\n    { label: \"Choose an option\", value: null },\n    { label: \"Option 1\", value: \"option1\" },\n    { label: \"Option 2\", value: \"option2\" },\n    { label: \"Option 3\", value: \"option3\" },\n  ]\n  const countryItems = [\n    { label: \"Select your country\", value: null },\n    { label: \"United States\", value: \"us\" },\n    { label: \"United Kingdom\", value: \"uk\" },\n    { label: \"Canada\", value: \"ca\" },\n  ]\n  const timezoneItems = [\n    { label: \"Select timezone\", value: null },\n    { label: \"UTC\", value: \"utc\" },\n    { label: \"Eastern Time\", value: \"est\" },\n    { label: \"Pacific Time\", value: \"pst\" },\n  ]\n  const invalidItems = [\n    { label: \"This field has an error\", value: null },\n    { label: \"Option 1\", value: \"option1\" },\n    { label: \"Option 2\", value: \"option2\" },\n    { label: \"Option 3\", value: \"option3\" },\n  ]\n  const disabledItems = [\n    { label: \"Cannot select\", value: null },\n    { label: \"Option 1\", value: \"option1\" },\n    { label: \"Option 2\", value: \"option2\" },\n    { label: \"Option 3\", value: \"option3\" },\n  ]\n\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select items={basicItems}>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {basicItems.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select items={countryItems}>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {countryItems.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select items={timezoneItems}>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {timezoneItems.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select items={invalidItems}>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {invalidItems.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select items={disabledItems} disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {disabledItems.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\">\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\">Dark mode</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\">Compact view</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\">\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\">Invalid checkbox</FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\">\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\">Free Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\">Pro Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\">Enterprise</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        </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        </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            <FieldLabel htmlFor=\"switch-profile\">\n              Make profile visible to others\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldLabel htmlFor=\"switch-email\">\n              Show email on profile\n            </FieldLabel>\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-sera/field.json b/apps/v4/public/r/styles/base-sera/field.json
index cfd59349d2..beb15f8bec 100644
--- a/apps/v4/public/r/styles/base-sera/field.json
+++ b/apps/v4/public/r/styles/base-sera/field.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/base-sera/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Label } from \"@/registry/base-sera/ui/label\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-semibold uppercase data-[variant=label]:text-xs data-[variant=legend]:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-10 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-relaxed group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-4 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-xs font-semibold tracking-wide uppercase group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal tracking-normal text-muted-foreground normal-case group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Label } from \"@/registry/base-sera/ui/label\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-semibold uppercase data-[variant=label]:text-xs data-[variant=legend]:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-10 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-relaxed group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-4 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 leading-normal font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal tracking-normal text-muted-foreground normal-case group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-sera/input-group.json b/apps/v4/public/r/styles/base-sera/input-group.json
index 74625dd3f7..be63672534 100644
--- a/apps/v4/public/r/styles/base-sera/input-group.json
+++ b/apps/v4/public/r/styles/base-sera/input-group.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/base-sera/ui/input-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport { Textarea } from \"@/registry/base-sera/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-10 w-full min-w-0 items-center rounded-none border border-transparent border-b-input bg-transparent transition-[color,border-color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-none has-data-[align=block-start]:rounded-none has-[[data-slot=input-group-control]:focus-visible]:border-b-ring has-[[data-slot][aria-invalid=true]]:border-b-destructive has-[textarea]:rounded-none has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:border-b-destructive/50 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-none **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"order-first\",\n        \"inline-end\": \"order-last\",\n        \"block-start\":\n          \"order-first w-full justify-start pt-3 group-has-[>input]/input-group:pt-3.5 [.border-b]:pb-3.5\",\n        \"block-end\":\n          \"order-last w-full justify-start pb-3 group-has-[>input]/input-group:pb-3.5 [.border-t]:pt-3.5\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"flex items-center gap-2 rounded-none text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-none px-1.5 text-xs [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 text-xs has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\"\n  }) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 border-0 bg-transparent ring-0 group-has-[>[data-align=inline-end]]/input-group:pr-2 group-has-[>[data-align=inline-start]]/input-group:pl-2 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none border-0 bg-transparent py-2.5 ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport { Textarea } from \"@/registry/base-sera/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-10 w-full min-w-0 items-center rounded-none border border-transparent border-b-input bg-transparent transition-[color,border-color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-none has-data-[align=block-start]:rounded-none has-[[data-slot=input-group-control]:focus-visible]:border-b-ring has-[[data-slot][aria-invalid=true]]:border-b-destructive has-[textarea]:rounded-none has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:border-b-destructive/50 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-none **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"order-first\",\n        \"inline-end\": \"order-last\",\n        \"block-start\":\n          \"order-first w-full justify-start pt-3 group-has-[>input]/input-group:pt-3.5 [.border-b]:pb-3.5\",\n        \"block-end\":\n          \"order-last w-full justify-start pb-3 group-has-[>input]/input-group:pb-3.5 [.border-t]:pt-3.5\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"flex items-center gap-2 rounded-none text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-none px-1.5 text-xs [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 text-xs has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\" | \"type\"> &\n  VariantProps<typeof inputGroupButtonVariants> & {\n    type?: \"button\" | \"submit\" | \"reset\"\n  }) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 border-0 bg-transparent ring-0 group-has-[>[data-align=inline-end]]/input-group:pr-2 group-has-[>[data-align=inline-start]]/input-group:pl-2 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none border-0 bg-transparent py-2.5 ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-sera/input-otp.json b/apps/v4/public/r/styles/base-sera/input-otp.json
index ddfc770a7a..dc8273df8e 100644
--- a/apps/v4/public/r/styles/base-sera/input-otp.json
+++ b/apps/v4/public/r/styles/base-sera/input-otp.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-sera/ui/input-otp.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\"disabled:cursor-not-allowed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\n        \"flex items-center gap-1 rounded-none has-aria-invalid:border-b-destructive dark:has-aria-invalid:border-b-destructive/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"relative flex size-10 items-center justify-center border border-transparent border-b-input bg-transparent text-sm transition-[color,border-color] outline-none first:rounded-none last:rounded-none aria-invalid:border-b-destructive data-[active=true]:z-10 data-[active=true]:border-b-ring dark:aria-invalid:border-b-destructive/50\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"flex items-center [&_svg:not([class*='size-'])]:size-4\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n        remixicon=\"RiSubtractLine\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\"disabled:cursor-not-allowed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\n        \"flex items-center gap-1 rounded-none has-aria-invalid:border-b-destructive dark:has-aria-invalid:border-b-destructive/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"relative flex size-10 items-center justify-center border border-transparent border-b-input bg-transparent text-sm transition-[color,border-color] outline-none first:rounded-none last:rounded-none aria-invalid:border-b-destructive data-[active=true]:z-10 data-[active=true]:border-b-ring dark:aria-invalid:border-b-destructive/50\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"flex items-center [&_svg:not([class*='size-'])]:size-3.5\"\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-sera/label.json b/apps/v4/public/r/styles/base-sera/label.json
index deb5b17cbb..5da42a6b12 100644
--- a/apps/v4/public/r/styles/base-sera/label.json
+++ b/apps/v4/public/r/styles/base-sera/label.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-sera/ui/label.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction Label({ className, ...props }: React.ComponentProps<\"label\">) {\n  return (\n    <label\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-xs leading-relaxed font-semibold tracking-wide uppercase select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[slot=checkbox]:text-sm peer-data-[slot=checkbox]:font-medium peer-data-[slot=checkbox]:tracking-normal peer-data-[slot=checkbox]:normal-case peer-data-[slot=radio]:text-sm peer-data-[slot=radio]:font-medium peer-data-[slot=radio]:tracking-normal peer-data-[slot=radio]:normal-case\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction Label({ className, ...props }: React.ComponentProps<\"label\">) {\n  return (\n    <label\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-relaxed font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[slot=checkbox]:font-normal peer-data-[slot=radio-group-item]:font-normal peer-data-[slot=switch]:font-normal\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-sera/menubar.json b/apps/v4/public/r/styles/base-sera/menubar.json
index b5f0d7eb64..b610fdcf9c 100644
--- a/apps/v4/public/r/styles/base-sera/menubar.json
+++ b/apps/v4/public/r/styles/base-sera/menubar.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/base-sera/ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-10 items-center rounded-none border p-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {\n  return <DropdownMenu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuGroup>) {\n  return <DropdownMenuGroup data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPortal>) {\n  return <DropdownMenuPortal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuTrigger>) {\n  return (\n    <DropdownMenuTrigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"flex items-center rounded-none px-2 py-0.75 text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"menubar-content\"\n      align={align}\n      alignOffset={alignOffset}\n      sideOffset={sideOffset}\n      className={cn(\n        \"cn-menu-target cn-menu-translucent min-w-48 rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuItem>) {\n  return (\n    <DropdownMenuItem\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/menubar-item gap-2.5 rounded-none px-3 py-2 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-3 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4\">\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {\n  return <DropdownMenuRadioGroup data-slot=\"menubar-radio-group\" {...props} />\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: MenuPrimitive.RadioItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-3 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4\">\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuLabel> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuLabel\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-3.5 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase data-inset:pl-9.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSeparator>) {\n  return (\n    <DropdownMenuSeparator\n      data-slot=\"menubar-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuShortcut>) {\n  return (\n    <DropdownMenuShortcut\n      data-slot=\"menubar-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSub>) {\n  return <DropdownMenuSub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuSubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"gap-2 rounded-none px-3 py-2 text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubContent>) {\n  return (\n    <DropdownMenuSubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"cn-menu-target cn-menu-translucent min-w-32 rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menu as MenuPrimitive } from \"@base-ui/react/menu\"\nimport { Menubar as MenubarPrimitive } from \"@base-ui/react/menubar\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/base-sera/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({ className, ...props }: MenubarPrimitive.Props) {\n  return (\n    <MenubarPrimitive\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-10 items-center rounded-none border p-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {\n  return <DropdownMenu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuGroup>) {\n  return <DropdownMenuGroup data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPortal>) {\n  return <DropdownMenuPortal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuTrigger>) {\n  return (\n    <DropdownMenuTrigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"flex items-center rounded-none px-2 py-0.75 text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuContent>) {\n  return (\n    <DropdownMenuContent\n      data-slot=\"menubar-content\"\n      align={align}\n      alignOffset={alignOffset}\n      sideOffset={sideOffset}\n      className={cn(\n        \"cn-menu-target cn-menu-translucent min-w-48 rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuItem>) {\n  return (\n    <DropdownMenuItem\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/menubar-item gap-2.5 rounded-none px-3 py-2 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-3.5 data-[variant=destructive]:*:[svg]:text-destructive!\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: MenuPrimitive.CheckboxItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-3 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4\">\n        <MenuPrimitive.CheckboxItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </MenuPrimitive.CheckboxItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {\n  return <DropdownMenuRadioGroup data-slot=\"menubar-radio-group\" {...props} />\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: MenuPrimitive.RadioItem.Props & {\n  inset?: boolean\n}) {\n  return (\n    <MenuPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-3 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4\">\n        <MenuPrimitive.RadioItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </MenuPrimitive.RadioItemIndicator>\n      </span>\n      {children}\n    </MenuPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuLabel> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuLabel\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-3.5 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase data-inset:pl-9.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSeparator>) {\n  return (\n    <DropdownMenuSeparator\n      data-slot=\"menubar-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuShortcut>) {\n  return (\n    <DropdownMenuShortcut\n      data-slot=\"menubar-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSub>) {\n  return <DropdownMenuSub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuSubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"gap-2 rounded-none px-3 py-2 text-xs font-medium tracking-wider uppercase focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuSubContent>) {\n  return (\n    <DropdownMenuSubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"cn-menu-target cn-menu-translucent min-w-32 rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-sera/native-select.json b/apps/v4/public/r/styles/base-sera/native-select.json
index c39cafcc4c..82e9bd2471 100644
--- a/apps/v4/public/r/styles/base-sera/native-select.json
+++ b/apps/v4/public/r/styles/base-sera/native-select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-sera/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"h-10 w-full min-w-0 appearance-none rounded-none border border-transparent border-b-input bg-transparent py-2 pr-8 pl-0 text-sm transition-[color,border-color] outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-b-ring disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-b-destructive data-[size=sm]:h-9 dark:aria-invalid:border-b-destructive/50\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"pointer-events-none absolute top-1/2 right-0 size-4 -translate-y-1/2 text-muted-foreground select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({\n  className,\n  ...props\n}: React.ComponentProps<\"option\">) {\n  return (\n    <option\n      data-slot=\"native-select-option\"\n      className={cn(\"bg-[Canvas] text-[CanvasText]\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(\"bg-[Canvas] text-[CanvasText]\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"h-10 w-full min-w-0 appearance-none rounded-none border border-transparent border-b-input bg-transparent py-2 pr-8 pl-0 text-sm transition-[color,border-color] outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-b-ring disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-b-destructive data-[size=sm]:h-9 dark:aria-invalid:border-b-destructive/50\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"pointer-events-none absolute top-1/2 right-0 size-3.5 -translate-y-1/2 text-muted-foreground select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({\n  className,\n  ...props\n}: React.ComponentProps<\"option\">) {\n  return (\n    <option\n      data-slot=\"native-select-option\"\n      className={cn(\"bg-[Canvas] text-[CanvasText]\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(\"bg-[Canvas] text-[CanvasText]\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-sera/navigation-menu.json b/apps/v4/public/r/styles/base-sera/navigation-menu.json
index 2e837b8ad1..b1c8e87fc5 100644
--- a/apps/v4/public/r/styles/base-sera/navigation-menu.json
+++ b/apps/v4/public/r/styles/base-sera/navigation-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-sera/ui/navigation-menu.tsx",
-      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  align = \"start\",\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props &\n  Pick<NavigationMenuPrimitive.Positioner.Props, \"align\">) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPositioner align={align} />\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"group flex flex-1 list-none items-center justify-center gap-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-none px-4.5 py-2.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Content.Props) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-2.5 pr-3 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow-md group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuPositioner({\n  className,\n  side = \"bottom\",\n  sideOffset = 8,\n  align = \"start\",\n  alignOffset = 0,\n  ...props\n}: NavigationMenuPrimitive.Positioner.Props) {\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          \"isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0\",\n          className\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0\">\n          <NavigationMenuPrimitive.Viewport className=\"relative size-full overflow-hidden\" />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Link.Props) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"flex items-center gap-1.5 rounded-none p-3 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none data-[active=true]:bg-muted/50 data-[active=true]:hover:bg-muted data-[active=true]:focus:bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>) {\n  return (\n    <NavigationMenuPrimitive.Icon\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-none bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Icon>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n  NavigationMenuPositioner,\n}\n",
+      "content": "import { NavigationMenu as NavigationMenuPrimitive } from \"@base-ui/react/navigation-menu\"\nimport { cva } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  align = \"start\",\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Root.Props &\n  Pick<NavigationMenuPrimitive.Positioner.Props, \"align\">) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      className={cn(\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <NavigationMenuPositioner align={align} />\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"group flex flex-1 list-none items-center justify-center gap-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-none px-4.5 py-2.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: NavigationMenuPrimitive.Trigger.Props) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Content.Props) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"data-ending-style:data-activation-direction=left:translate-x-[50%] data-ending-style:data-activation-direction=right:translate-x-[-50%] data-starting-style:data-activation-direction=left:translate-x-[-50%] data-starting-style:data-activation-direction=right:translate-x-[50%] h-full w-auto p-2.5 pr-3 transition-[opacity,transform,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow-md group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-ending-style:opacity-0 data-starting-style:opacity-0 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuPositioner({\n  className,\n  side = \"bottom\",\n  sideOffset = 8,\n  align = \"start\",\n  alignOffset = 0,\n  ...props\n}: NavigationMenuPrimitive.Positioner.Props) {\n  return (\n    <NavigationMenuPrimitive.Portal>\n      <NavigationMenuPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        className={cn(\n          \"isolate z-50 h-(--positioner-height) w-(--positioner-width) max-w-(--available-width) transition-[top,left,right,bottom] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] data-instant:transition-none data-[side=bottom]:before:top-[-10px] data-[side=bottom]:before:right-0 data-[side=bottom]:before:left-0\",\n          className\n        )}\n        {...props}\n      >\n        <NavigationMenuPrimitive.Popup className=\"data-[ending-style]:easing-[ease] xs:w-(--popup-width) relative h-(--popup-height) w-(--popup-width) origin-(--transform-origin) rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 transition-[opacity,transform,width,height,scale,translate] duration-[0.35s] ease-[cubic-bezier(0.22,1,0.36,1)] outline-none data-ending-style:scale-90 data-ending-style:opacity-0 data-ending-style:duration-150 data-starting-style:scale-90 data-starting-style:opacity-0\">\n          <NavigationMenuPrimitive.Viewport className=\"relative size-full overflow-hidden\" />\n        </NavigationMenuPrimitive.Popup>\n      </NavigationMenuPrimitive.Positioner>\n    </NavigationMenuPrimitive.Portal>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: NavigationMenuPrimitive.Link.Props) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"flex items-center gap-1.5 rounded-none p-3 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none data-[active=true]:bg-muted/50 data-[active=true]:hover:bg-muted data-[active=true]:focus:bg-muted [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof NavigationMenuPrimitive.Icon>) {\n  return (\n    <NavigationMenuPrimitive.Icon\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-none bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Icon>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuContent,\n  NavigationMenuIndicator,\n  NavigationMenuItem,\n  NavigationMenuLink,\n  NavigationMenuList,\n  NavigationMenuTrigger,\n  navigationMenuTriggerStyle,\n  NavigationMenuPositioner,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-sera/select-example.json b/apps/v4/public/r/styles/base-sera/select-example.json
index 630b92cb10..de51f4dc0e 100644
--- a/apps/v4/public/r/styles/base-sera/select-example.json
+++ b/apps/v4/public/r/styles/base-sera/select-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-sera/examples/select-example.tsx",
-      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-sera/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-sera/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-sera/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-sera/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectSides />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSides() {\n  const items = [\n    { label: \"Select\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Select key={side} items={items}>\n            <SelectTrigger className=\"w-28 capitalize\">\n              <SelectValue placeholder={side.replace(\"-\", \" \")} />\n            </SelectTrigger>\n            <SelectContent side={side} alignItemWithTrigger={false}>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartBarIcon\"\n            remixicon=\"RiBarChartLine\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/base-sera/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-sera/ui/field\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-sera/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-sera/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-sera/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectSides />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSides() {\n  const items = [\n    { label: \"Select\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Select key={side} items={items}>\n            <SelectTrigger className=\"w-28 capitalize\">\n              <SelectValue placeholder={side.replace(\"-\", \" \")} />\n            </SelectTrigger>\n            <SelectContent side={side} alignItemWithTrigger={false}>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartBarIcon\"\n            remixicon=\"RiBarChartLine\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0 normal-case\">\n        <ItemTitle className=\"font-sans\">{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs font-normal tracking-normal\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-sera/select.json b/apps/v4/public/r/styles/base-sera/select.json
index f1ca66b4d0..4c9948d92a 100644
--- a/apps/v4/public/r/styles/base-sera/select.json
+++ b/apps/v4/public/r/styles/base-sera/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-sera/ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1.5 p-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-none border border-transparent border-b-input bg-transparent px-0 py-2 text-sm whitespace-nowrap transition-[color,border-color] outline-none focus-visible:border-b-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive data-placeholder:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-b-destructive/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n            className=\"pointer-events-none size-4 text-muted-foreground\"\n          />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          data-align-trigger={alignItemWithTrigger}\n          className={cn(\n            \"cn-menu-target cn-menu-translucent relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\n        \"px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 shrink-0 gap-2 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={\n          <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n        }\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n          className=\"pointer-events-none\"\n        />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\n        \"pointer-events-none -mx-1.5 my-1.5 h-px bg-border\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n        phosphor=\"CaretUpIcon\"\n        remixicon=\"RiArrowUpSLine\"\n      />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n      />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"@base-ui/react/select\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({ className, ...props }: SelectPrimitive.Group.Props) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1.5 p-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({ className, ...props }: SelectPrimitive.Value.Props) {\n  return (\n    <SelectPrimitive.Value\n      data-slot=\"select-value\"\n      className={cn(\"flex flex-1 text-left\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: SelectPrimitive.Trigger.Props & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-none border border-transparent border-b-input bg-transparent px-0 py-2 text-sm whitespace-nowrap transition-[color,border-color] outline-none focus-visible:border-b-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive data-placeholder:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-b-destructive/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <IconPlaceholder\n            lucide=\"ChevronDownIcon\"\n            tabler=\"IconSelector\"\n            hugeicons=\"UnfoldMoreIcon\"\n            phosphor=\"CaretDownIcon\"\n            remixicon=\"RiArrowDownSLine\"\n            className=\"pointer-events-none size-3.5 text-muted-foreground\"\n          />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  side = \"bottom\",\n  sideOffset = 4,\n  align = \"center\",\n  alignOffset = 0,\n  alignItemWithTrigger = true,\n  ...props\n}: SelectPrimitive.Popup.Props &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    \"align\" | \"alignOffset\" | \"side\" | \"sideOffset\" | \"alignItemWithTrigger\"\n  >) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        alignItemWithTrigger={alignItemWithTrigger}\n        className=\"isolate z-50\"\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          data-align-trigger={alignItemWithTrigger}\n          className={cn(\n            \"cn-menu-target cn-menu-translucent relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: SelectPrimitive.GroupLabel.Props) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn(\n        \"px-3 py-2 text-[0.625rem] tracking-wider text-muted-foreground uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: SelectPrimitive.Item.Props) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <SelectPrimitive.ItemText className=\"flex flex-1 shrink-0 gap-2 whitespace-nowrap\">\n        {children}\n      </SelectPrimitive.ItemText>\n      <SelectPrimitive.ItemIndicator\n        render={\n          <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n        }\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n          className=\"pointer-events-none\"\n        />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: SelectPrimitive.Separator.Props) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\n        \"pointer-events-none -mx-1.5 my-1.5 h-px bg-border\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n        phosphor=\"CaretUpIcon\"\n        remixicon=\"RiArrowUpSLine\"\n      />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n      />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-sera/sidebar.json b/apps/v4/public/r/styles/base-sera/sidebar.json
index 490a6e0d7c..000bf58b37 100644
--- a/apps/v4/public/r/styles/base-sera/sidebar.json
+++ b/apps/v4/public/r/styles/base-sera/sidebar.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/base-sera/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { useIsMobile } from \"@/registry/base-sera/hooks/use-mobile\"\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/base-sera/ui/sheet\"\nimport { Skeleton } from \"@/registry/base-sera/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-sera/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer hidden text-sidebar-foreground md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\n        \"h-8 w-full border-input bg-transparent shadow-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2 [--radius:0]\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"mx-2 w-auto bg-sidebar-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto [--radius:0] group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"flex h-8 shrink-0 items-center rounded-none px-3 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"w-full text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"flex w-full min-w-0 flex-col gap-0.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-none px-3 py-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-9 text-sm\",\n        sm: \"h-8 text-xs\",\n        lg: \"h-14 px-3 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : <TooltipTrigger render={render} />,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0\",\n          showOnHover &&\n            \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-none px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"flex h-8 items-center gap-2 rounded-none px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-none\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-none px-3 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { mergeProps } from \"@base-ui/react/merge-props\"\nimport { useRender } from \"@base-ui/react/use-render\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { useIsMobile } from \"@/registry/base-sera/hooks/use-mobile\"\nimport { cn } from \"@/registry/base-sera/lib/utils\"\nimport { Button } from \"@/registry/base-sera/ui/button\"\nimport { Input } from \"@/registry/base-sera/ui/input\"\nimport { Separator } from \"@/registry/base-sera/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/base-sera/ui/sheet\"\nimport { Skeleton } from \"@/registry/base-sera/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/base-sera/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer hidden text-sidebar-foreground md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\n        \"h-8 w-full border-input bg-transparent shadow-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2 [--radius:0]\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"mx-2 w-auto bg-sidebar-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto [--radius:0] group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"div\"> & React.ComponentProps<\"div\">) {\n  return useRender({\n    defaultTagName: \"div\",\n    props: mergeProps<\"div\">(\n      {\n        className: cn(\n          \"flex h-8 shrink-0 items-center rounded-none px-3 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-3.5 [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-label\",\n      sidebar: \"group-label\",\n    },\n  })\n}\n\nfunction SidebarGroupAction({\n  className,\n  render,\n  ...props\n}: useRender.ComponentProps<\"button\"> & React.ComponentProps<\"button\">) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-3.5 [&>svg]:shrink-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-group-action\",\n      sidebar: \"group-action\",\n    },\n  })\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"w-full text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"flex w-full min-w-0 flex-col gap-0.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-none px-3 py-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-9 text-sm\",\n        sm: \"h-8 text-xs\",\n        lg: \"h-14 px-3 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  render,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    isActive?: boolean\n    tooltip?: string | React.ComponentProps<typeof TooltipContent>\n  } & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const { isMobile, state } = useSidebar()\n  const comp = useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(sidebarMenuButtonVariants({ variant, size }), className),\n      },\n      props\n    ),\n    render: !tooltip ? render : <TooltipTrigger render={render} />,\n    state: {\n      slot: \"sidebar-menu-button\",\n      sidebar: \"menu-button\",\n      size,\n      active: isActive,\n    },\n  })\n\n  if (!tooltip) {\n    return comp\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      {comp}\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  render,\n  showOnHover = false,\n  ...props\n}: useRender.ComponentProps<\"button\"> &\n  React.ComponentProps<\"button\"> & {\n    showOnHover?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"button\",\n    props: mergeProps<\"button\">(\n      {\n        className: cn(\n          \"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-3.5 [&>svg]:shrink-0\",\n          showOnHover &&\n            \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-action\",\n      sidebar: \"menu-action\",\n    },\n  })\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-none px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"flex h-8 items-center gap-2 rounded-none px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-3.5 rounded-none\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  render,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: useRender.ComponentProps<\"a\"> &\n  React.ComponentProps<\"a\"> & {\n    size?: \"sm\" | \"md\"\n    isActive?: boolean\n  }) {\n  return useRender({\n    defaultTagName: \"a\",\n    props: mergeProps<\"a\">(\n      {\n        className: cn(\n          \"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-none px-3 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-3.5 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n          className\n        ),\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: \"sidebar-menu-sub-button\",\n      sidebar: \"menu-sub-button\",\n      size,\n      active: isActive,\n    },\n  })\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-sera/switch-example.json b/apps/v4/public/r/styles/base-sera/switch-example.json
index f4e9b07919..000f88a299 100644
--- a/apps/v4/public/r/styles/base-sera/switch-example.json
+++ b/apps/v4/public/r/styles/base-sera/switch-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-sera/examples/switch-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/base-sera/ui/field\"\nimport { Label } from \"@/registry/base-sera/ui/label\"\nimport { Switch } from \"@/registry/base-sera/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-sera/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/base-sera/ui/field\"\nimport { Label } from \"@/registry/base-sera/ui/label\"\nimport { Switch } from \"@/registry/base-sera/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchWithLabel />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-sera/tabs.json b/apps/v4/public/r/styles/base-sera/tabs.json
index 34b4e82aea..2df85630bc 100644
--- a/apps/v4/public/r/styles/base-sera/tabs.json
+++ b/apps/v4/public/r/styles/base-sera/tabs.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-sera/ui/tabs.tsx",
-      "content": "\"use client\"\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"group/tabs-list inline-flex w-fit items-center justify-center p-1 text-muted-foreground group-data-horizontal/tabs:h-10 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-4 group-data-vertical/tabs:py-2 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground\",\n        \"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-sm outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
+      "content": "\"use client\"\n\nimport { Tabs as TabsPrimitive } from \"@base-ui/react/tabs\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: TabsPrimitive.Root.Props) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"group/tabs-list inline-flex w-fit items-center justify-center p-1 text-muted-foreground group-data-horizontal/tabs:h-10 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: TabsPrimitive.List.Props & VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-4 group-data-vertical/tabs:py-2 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground\",\n        \"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({ className, ...props }: TabsPrimitive.Panel.Props) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-sm outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-sera/toggle.json b/apps/v4/public/r/styles/base-sera/toggle.json
index 80a2afd5d2..07949be508 100644
--- a/apps/v4/public/r/styles/base-sera/toggle.json
+++ b/apps/v4/public/r/styles/base-sera/toggle.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/base-sera/ui/toggle.tsx",
-      "content": "\"use client\"\n\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nconst toggleVariants = cva(\n  \"group/toggle inline-flex items-center justify-center gap-1.5 rounded-none text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border border-input bg-transparent hover:bg-muted\",\n      },\n      size: {\n        default:\n          \"h-10 min-w-10 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4\",\n        sm: \"h-9 min-w-9 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        lg: \"h-11 min-w-11 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants }\n",
+      "content": "\"use client\"\n\nimport { Toggle as TogglePrimitive } from \"@base-ui/react/toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/base-sera/lib/utils\"\n\nconst toggleVariants = cva(\n  \"group/toggle inline-flex items-center justify-center gap-1.5 rounded-none text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border border-input bg-transparent hover:bg-muted\",\n      },\n      size: {\n        default:\n          \"h-10 min-w-10 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4\",\n        sm: \"h-9 min-w-9 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        lg: \"h-11 min-w-11 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants }\n",
       "type": "registry:ui"
     }
   ],
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 2ad7018467..9d1f038357 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      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>GitHub</DropdownMenuItem>\n          <DropdownMenuItem>Support</DropdownMenuItem>\n          <DropdownMenuItem disabled>API</DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuSides() {\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <DropdownMenu key={side}>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit capitalize\" />}\n            >\n              {side.replace(\"-\", \" \")}\n            </DropdownMenuTrigger>\n            <DropdownMenuContent side={side}>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>Profile</DropdownMenuItem>\n                <DropdownMenuItem>Billing</DropdownMenuItem>\n                <DropdownMenuItem>Settings</DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"UserIcon\"\n              tabler=\"IconUser\"\n              hugeicons=\"UserIcon\"\n              phosphor=\"UserIcon\"\n              remixicon=\"RiUserLine\"\n            />\n            Profile\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"CreditCardIcon\"\n              tabler=\"IconCreditCard\"\n              hugeicons=\"CreditCardIcon\"\n              phosphor=\"CreditCardIcon\"\n              remixicon=\"RiBankCardLine\"\n            />\n            Billing\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"SettingsIcon\"\n              tabler=\"IconSettings\"\n              hugeicons=\"SettingsIcon\"\n              phosphor=\"GearIcon\"\n              remixicon=\"RiSettingsLine\"\n            />\n            Settings\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"LogOutIcon\"\n              tabler=\"IconLogout\"\n              hugeicons=\"LogoutIcon\"\n              phosphor=\"SignOutIcon\"\n              remixicon=\"RiLogoutBoxLine\"\n            />\n            Log out\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            Log out\n            <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuItem>Email</DropdownMenuItem>\n                  <DropdownMenuItem>Message</DropdownMenuItem>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuItem>More...</DropdownMenuItem>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Checkboxes\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Radio Group\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Notifications\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Payment Method\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Actions\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"PencilIcon\"\n              tabler=\"IconPencil\"\n              hugeicons=\"EditIcon\"\n              phosphor=\"PencilIcon\"\n              remixicon=\"RiPencilLine\"\n            />\n            Edit\n          </DropdownMenuItem>\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ShareIcon\"\n              tabler=\"IconShare\"\n              hugeicons=\"ShareIcon\"\n              phosphor=\"ShareIcon\"\n              remixicon=\"RiShareLine\"\n            />\n            Share\n          </DropdownMenuItem>\n          <DropdownMenuSeparator />\n          <DropdownMenuItem>\n            <IconPlaceholder\n              lucide=\"ArchiveIcon\"\n              tabler=\"IconArchive\"\n              hugeicons=\"Archive02Icon\"\n              phosphor=\"ArchiveIcon\"\n              remixicon=\"RiArchiveLine\"\n            />\n            Archive\n          </DropdownMenuItem>\n          <DropdownMenuItem variant=\"destructive\">\n            <IconPlaceholder\n              lucide=\"TrashIcon\"\n              tabler=\"IconTrash\"\n              hugeicons=\"DeleteIcon\"\n              phosphor=\"TrashIcon\"\n              remixicon=\"RiDeleteBinLine\"\n            />\n            Delete\n          </DropdownMenuItem>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuItem>\n        <IconPlaceholder\n          lucide=\"LogOutIcon\"\n          tabler=\"IconLogout\"\n          hugeicons=\"LogoutIcon\"\n          phosphor=\"SignOutIcon\"\n          remixicon=\"RiLogoutBoxLine\"\n        />\n        Sign Out\n      </DropdownMenuItem>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button\n                variant=\"outline\"\n                className=\"h-12 justify-start px-2 md:max-w-[200px]\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"truncate text-xs text-muted-foreground\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                  remixicon=\"RiClipboardLine\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "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] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n              />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n              <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n            </Avatar>\n            <div className=\"grid flex-1 text-left text-sm leading-tight\">\n              <span className=\"truncate font-semibold\">shadcn</span>\n              <span className=\"truncate text-xs text-muted-foreground\">\n                shadcn@example.com\n              </span>\n            </div>\n            <IconPlaceholder\n              lucide=\"ChevronsUpDownIcon\"\n              tabler=\"IconSelector\"\n              hugeicons=\"UnfoldMoreIcon\"\n              phosphor=\"CaretUpDownIcon\"\n              remixicon=\"RiArrowUpDownLine\"\n              className=\"ml-auto text-muted-foreground\"\n            />\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--anchor-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={\n              <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\" />\n            }\n          >\n            <Avatar>\n              <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n              <AvatarFallback>LR</AvatarFallback>\n            </Avatar>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger\n              render={<Button variant=\"outline\" className=\"w-fit\" />}\n            >\n              Open Menu\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"CopyIcon\"\n                  tabler=\"IconCopy\"\n                  hugeicons=\"CopyIcon\"\n                  phosphor=\"CopyIcon\"\n                  remixicon=\"RiFileCopyLine\"\n                />\n                Copy\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ScissorsIcon\"\n                  tabler=\"IconCut\"\n                  hugeicons=\"ScissorIcon\"\n                  phosphor=\"ScissorsIcon\"\n                  remixicon=\"RiScissorsLine\"\n                />\n                Cut\n              </DropdownMenuItem>\n              <DropdownMenuItem>\n                <IconPlaceholder\n                  lucide=\"ClipboardPasteIcon\"\n                  tabler=\"IconClipboard\"\n                  hugeicons=\"ClipboardIcon\"\n                  phosphor=\"ClipboardIcon\"\n                  remixicon=\"RiClipboardLine\"\n                />\n                Paste\n              </DropdownMenuItem>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                    <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                    <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuItem variant=\"destructive\">\n                <IconPlaceholder\n                  lucide=\"TrashIcon\"\n                  tabler=\"IconTrash\"\n                  hugeicons=\"DeleteIcon\"\n                  phosphor=\"TrashIcon\"\n                  remixicon=\"RiDeleteBinLine\"\n                />\n                Delete\n              </DropdownMenuItem>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Open\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger\n          render={<Button variant=\"outline\" className=\"w-fit\" />}\n        >\n          Complex Menu\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
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 7ef794637d..8e18537fe6 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 { RadioGroup, RadioGroupItem } 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",
+      "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 { RadioGroup, RadioGroupItem } 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\">\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\">Dark mode</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\">Compact view</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\">\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\">Invalid checkbox</FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\">\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\">Free Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\">Pro Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\">Enterprise</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        </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        </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            <FieldLabel htmlFor=\"switch-profile\">\n              Make profile visible to others\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldLabel htmlFor=\"switch-email\">\n              Show email on profile\n            </FieldLabel>\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/select-example.json b/apps/v4/public/r/styles/base-vega/select-example.json
index 7a7865d3c5..a3519dc9c3 100644
--- a/apps/v4/public/r/styles/base-vega/select-example.json
+++ b/apps/v4/public/r/styles/base-vega/select-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/select-example.tsx",
-      "content": "\"use client\"\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  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-vega/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-vega/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectSides />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSides() {\n  const items = [\n    { label: \"Select\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Select key={side} items={items}>\n            <SelectTrigger className=\"w-28 capitalize\">\n              <SelectValue placeholder={side.replace(\"-\", \" \")} />\n            </SelectTrigger>\n            <SelectContent side={side} alignItemWithTrigger={false}>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartBarIcon\"\n            remixicon=\"RiBarChartLine\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\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  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/base-vega/ui/field\"\nimport { Input } from \"@/registry/base-vega/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/base-vega/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/base-vega/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/base-vega/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectSides />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectMultiple />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Basic\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSides() {\n  const items = [\n    { label: \"Select\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sides\" containerClassName=\"col-span-2\">\n      <div className=\"flex flex-wrap justify-center gap-2\">\n        {(\n          [\n            \"inline-start\",\n            \"left\",\n            \"top\",\n            \"bottom\",\n            \"right\",\n            \"inline-end\",\n          ] as const\n        ).map((side) => (\n          <Select key={side} items={items}>\n            <SelectTrigger className=\"w-28 capitalize\">\n              <SelectValue placeholder={side.replace(\"-\", \" \")} />\n            </SelectTrigger>\n            <SelectContent side={side} alignItemWithTrigger={false}>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        ))}\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  const items = [\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Chart Type\n        </>\n      ),\n      value: null,\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartLineIcon\"\n            tabler=\"IconChartLine\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartLineIcon\"\n            remixicon=\"RiLineChartLine\"\n          />\n          Line\n        </>\n      ),\n      value: \"line\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartBarIcon\"\n            tabler=\"IconChartBar\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartBarIcon\"\n            remixicon=\"RiBarChartLine\"\n          />\n          Bar\n        </>\n      ),\n      value: \"bar\",\n    },\n    {\n      label: (\n        <>\n          <IconPlaceholder\n            lucide=\"ChartPieIcon\"\n            tabler=\"IconChartPie\"\n            hugeicons=\"Chart03Icon\"\n            phosphor=\"ChartPieIcon\"\n            remixicon=\"RiPieChartLine\"\n          />\n          Pie\n        </>\n      ),\n      value: \"pie\",\n    },\n  ]\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  const fruits = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  const vegetables = [\n    { label: \"Carrot\", value: \"carrot\" },\n    { label: \"Broccoli\", value: \"broccoli\" },\n    { label: \"Spinach\", value: \"spinach\" },\n  ]\n  const allItems = [\n    { label: \"Select a fruit\", value: null },\n    ...fruits,\n    ...vegetables,\n  ]\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select items={allItems}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            {fruits.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            {vegetables.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  const items = [\n    { label: \"Select an item\", value: null },\n    ...Array.from({ length: 100 }).map((_, i) => ({\n      label: `Item ${i}`,\n      value: `item-${i}`,\n    })),\n  ]\n  return (\n    <Example title=\"Large List\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger size=\"sm\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select items={items}>\n          <SelectTrigger size=\"default\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n  ]\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger size=\"sm\">\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Item Aligned\">\n      <Select items={items}>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent alignItemWithTrigger={true}>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select items={items}>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select items={items}>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select items={items}>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  const items = [\n    { label: \"Filter\", value: null },\n    { label: \"All\", value: \"all\" },\n    { label: \"Active\", value: \"active\" },\n    { label: \"Inactive\", value: \"inactive\" },\n  ]\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select items={items}>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              {items.map((item) => (\n                <SelectItem key={item.value} value={item.value}>\n                  {item.label}\n                </SelectItem>\n              ))}\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\", disabled: true },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"Disabled\">\n      <Select items={items} disabled>\n        <SelectTrigger>\n          <SelectValue />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem\n                key={item.value}\n                value={item.value}\n                disabled={item.disabled}\n              >\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select\n        defaultValue={plans[0]}\n        itemToStringValue={(plan: (typeof plans)[number]) => plan.name}\n      >\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {(value: (typeof plans)[number]) => <SelectPlanItem plan={value} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0 normal-case\">\n        <ItemTitle className=\"font-sans\">{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs font-normal tracking-normal\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectMultiple() {\n  const items = [\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n    { label: \"Strawberry\", value: \"strawberry\" },\n    { label: \"Watermelon\", value: \"watermelon\" },\n  ]\n  return (\n    <Example title=\"Multiple Selection\">\n      <Select items={items} multiple defaultValue={[]}>\n        <SelectTrigger className=\"w-72\">\n          <SelectValue>\n            {(value: string[]) => {\n              if (value.length === 0) {\n                return \"Select fruits\"\n              }\n              if (value.length === 1) {\n                return items.find((item) => item.value === value[0])?.label\n              }\n              return `${value.length} fruits selected`\n            }}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {items.map((item) => (\n              <SelectItem key={item.value} value={item.value}>\n                {item.label}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectInDialog() {\n  const items = [\n    { label: \"Select a fruit\", value: null },\n    { label: \"Apple\", value: \"apple\" },\n    { label: \"Banana\", value: \"banana\" },\n    { label: \"Blueberry\", value: \"blueberry\" },\n    { label: \"Grapes\", value: \"grapes\" },\n    { label: \"Pineapple\", value: \"pineapple\" },\n  ]\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger render={<Button variant=\"outline\" />}>\n          Open Dialog\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select items={items}>\n            <SelectTrigger>\n              <SelectValue />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                {items.map((item) => (\n                  <SelectItem key={item.value} value={item.value}>\n                    {item.label}\n                  </SelectItem>\n                ))}\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/base-vega/switch-example.json b/apps/v4/public/r/styles/base-vega/switch-example.json
index 9425429111..906958d435 100644
--- a/apps/v4/public/r/styles/base-vega/switch-example.json
+++ b/apps/v4/public/r/styles/base-vega/switch-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/base-vega/examples/switch-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/base-vega/ui/field\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport { Switch } from \"@/registry/base-vega/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/base-vega/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/base-vega/ui/field\"\nimport { Label } from \"@/registry/base-vega/ui/label\"\nimport { Switch } from \"@/registry/base-vega/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchWithLabel />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-luma/dropdown-menu-example.json b/apps/v4/public/r/styles/radix-luma/dropdown-menu-example.json
index d55811519c..774c647b4b 100644
--- a/apps/v4/public/r/styles/radix-luma/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/radix-luma/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-luma/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-luma/ui/avatar\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-luma/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-luma/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-luma/ui/avatar\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-luma/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-luma/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-luma/field-example.json b/apps/v4/public/r/styles/radix-luma/field-example.json
index 44f1f9122a..6c465c52f2 100644
--- a/apps/v4/public/r/styles/radix-luma/field-example.json
+++ b/apps/v4/public/r/styles/radix-luma/field-example.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/radix-luma/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-luma/components/example\"\nimport { Badge } from \"@/registry/radix-luma/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-luma/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-luma/ui/field\"\nimport { Input } from \"@/registry/radix-luma/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-luma/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-luma/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-luma/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-luma/ui/select\"\nimport { Slider } from \"@/registry/radix-luma/ui/slider\"\nimport { Switch } from \"@/registry/radix-luma/ui/switch\"\nimport { Textarea } from \"@/registry/radix-luma/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"us\">United States</SelectItem>\n                <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                <SelectItem value=\"ca\">Canada</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"utc\">UTC</SelectItem>\n                <SelectItem value=\"est\">Eastern Time</SelectItem>\n                <SelectItem value=\"pst\">Pacific Time</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction HorizontalFields() {\n  return (\n    <Example title=\"Horizontal Fields\">\n      <FieldGroup className=\"**:data-[slot=field-content]:min-w-48\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-input\">Username</FieldLabel>\n            <FieldDescription>Enter your preferred username.</FieldDescription>\n          </FieldContent>\n          <Input id=\"horizontal-input\" placeholder=\"johndoe\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-textarea\">Bio</FieldLabel>\n            <FieldDescription>\n              Write a short description about yourself.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"horizontal-textarea\"\n            placeholder=\"Tell us about yourself...\"\n          />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-switch\">\n              Email Notifications\n            </FieldLabel>\n            <FieldDescription>\n              Receive email updates about your account.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"horizontal-switch\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-select\">Favorite Fruit</FieldLabel>\n            <FieldDescription>Choose your favorite fruit.</FieldDescription>\n          </FieldContent>\n          <Select>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"orange\">Orange</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-native-select\">Country</FieldLabel>\n            <FieldDescription>Select your country.</FieldDescription>\n          </FieldContent>\n          <NativeSelect id=\"horizontal-native-select\">\n            <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-slider\">Volume</FieldLabel>\n            <FieldDescription>Adjust the volume level.</FieldDescription>\n          </FieldContent>\n          <Slider id=\"horizontal-slider\" defaultValue={[50]} max={100} />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "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-luma/components/example\"\nimport { Badge } from \"@/registry/radix-luma/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-luma/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-luma/ui/field\"\nimport { Input } from \"@/registry/radix-luma/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-luma/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-luma/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-luma/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-luma/ui/select\"\nimport { Slider } from \"@/registry/radix-luma/ui/slider\"\nimport { Switch } from \"@/registry/radix-luma/ui/switch\"\nimport { Textarea } from \"@/registry/radix-luma/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"us\">United States</SelectItem>\n                <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                <SelectItem value=\"ca\">Canada</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"utc\">UTC</SelectItem>\n                <SelectItem value=\"est\">Eastern Time</SelectItem>\n                <SelectItem value=\"pst\">Pacific Time</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\">\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\">Dark mode</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\">Compact view</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\">\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\">Invalid checkbox</FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\">\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\">Free Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\">Pro Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\">Enterprise</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        </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        </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            <FieldLabel htmlFor=\"switch-profile\">\n              Make profile visible to others\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldLabel htmlFor=\"switch-email\">\n              Show email on profile\n            </FieldLabel>\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-luma/select-example.json b/apps/v4/public/r/styles/radix-luma/select-example.json
index 7280a093f2..a3fbb04ffa 100644
--- a/apps/v4/public/r/styles/radix-luma/select-example.json
+++ b/apps/v4/public/r/styles/radix-luma/select-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-luma/examples/select-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-luma/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-luma/ui/field\"\nimport { Input } from \"@/registry/radix-luma/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-luma/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-luma/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-luma/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartLineIcon\"\n                  remixicon=\"RiLineChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport { Button } from \"@/registry/radix-luma/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-luma/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-luma/ui/field\"\nimport { Input } from \"@/registry/radix-luma/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-luma/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-luma/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-luma/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartLineIcon\"\n                  remixicon=\"RiLineChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0 normal-case\">\n        <ItemTitle className=\"font-sans\">{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs font-normal tracking-normal\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-luma/switch-example.json b/apps/v4/public/r/styles/radix-luma/switch-example.json
index 563421ba61..81c6cc5e35 100644
--- a/apps/v4/public/r/styles/radix-luma/switch-example.json
+++ b/apps/v4/public/r/styles/radix-luma/switch-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-luma/examples/switch-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/radix-luma/ui/field\"\nimport { Label } from \"@/registry/radix-luma/ui/label\"\nimport { Switch } from \"@/registry/radix-luma/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-luma/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/radix-luma/ui/field\"\nimport { Label } from \"@/registry/radix-luma/ui/label\"\nimport { Switch } from \"@/registry/radix-luma/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchWithLabel />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
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 8ce5d6f968..1fdff44f7f 100644
--- a/apps/v4/public/r/styles/radix-lyra/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-lyra/ui/avatar\"\nimport { Button } from \"@/registry/radix-lyra/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-lyra/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-lyra/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/field-example.json b/apps/v4/public/r/styles/radix-lyra/field-example.json
index d2a5f57992..b7a9ba8ffe 100644
--- a/apps/v4/public/r/styles/radix-lyra/field-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/field-example.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/field-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-lyra/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-lyra/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-lyra/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-lyra/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport { Slider } from \"@/registry/radix-lyra/ui/slider\"\nimport { Switch } from \"@/registry/radix-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"us\">United States</SelectItem>\n                <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                <SelectItem value=\"ca\">Canada</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"utc\">UTC</SelectItem>\n                <SelectItem value=\"est\">Eastern Time</SelectItem>\n                <SelectItem value=\"pst\">Pacific Time</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction HorizontalFields() {\n  return (\n    <Example title=\"Horizontal Fields\">\n      <FieldGroup className=\"**:data-[slot=field-content]:min-w-48\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-input\">Username</FieldLabel>\n            <FieldDescription>Enter your preferred username.</FieldDescription>\n          </FieldContent>\n          <Input id=\"horizontal-input\" placeholder=\"johndoe\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-textarea\">Bio</FieldLabel>\n            <FieldDescription>\n              Write a short description about yourself.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"horizontal-textarea\"\n            placeholder=\"Tell us about yourself...\"\n          />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-switch\">\n              Email Notifications\n            </FieldLabel>\n            <FieldDescription>\n              Receive email updates about your account.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"horizontal-switch\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-select\">Favorite Fruit</FieldLabel>\n            <FieldDescription>Choose your favorite fruit.</FieldDescription>\n          </FieldContent>\n          <Select>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"orange\">Orange</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-native-select\">Country</FieldLabel>\n            <FieldDescription>Select your country.</FieldDescription>\n          </FieldContent>\n          <NativeSelect id=\"horizontal-native-select\">\n            <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-slider\">Volume</FieldLabel>\n            <FieldDescription>Adjust the volume level.</FieldDescription>\n          </FieldContent>\n          <Slider id=\"horizontal-slider\" defaultValue={[50]} max={100} />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport { Badge } from \"@/registry/radix-lyra/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-lyra/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-lyra/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-lyra/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-lyra/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport { Slider } from \"@/registry/radix-lyra/ui/slider\"\nimport { Switch } from \"@/registry/radix-lyra/ui/switch\"\nimport { Textarea } from \"@/registry/radix-lyra/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"us\">United States</SelectItem>\n                <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                <SelectItem value=\"ca\">Canada</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"utc\">UTC</SelectItem>\n                <SelectItem value=\"est\">Eastern Time</SelectItem>\n                <SelectItem value=\"pst\">Pacific Time</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\">\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\">Dark mode</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\">Compact view</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\">\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\">Invalid checkbox</FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\">\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\">Free Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\">Pro Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\">Enterprise</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        </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        </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            <FieldLabel htmlFor=\"switch-profile\">\n              Make profile visible to others\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldLabel htmlFor=\"switch-email\">\n              Show email on profile\n            </FieldLabel>\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/select-example.json b/apps/v4/public/r/styles/radix-lyra/select-example.json
index ce2e67f436..37dae43d05 100644
--- a/apps/v4/public/r/styles/radix-lyra/select-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/select-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/select-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  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-lyra/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartLineIcon\"\n                  remixicon=\"RiLineChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "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  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Input } from \"@/registry/radix-lyra/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-lyra/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-lyra/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-lyra/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartLineIcon\"\n                  remixicon=\"RiLineChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0 normal-case\">\n        <ItemTitle className=\"font-sans\">{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs font-normal tracking-normal\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-lyra/switch-example.json b/apps/v4/public/r/styles/radix-lyra/switch-example.json
index 34e7f52455..0efe2c1030 100644
--- a/apps/v4/public/r/styles/radix-lyra/switch-example.json
+++ b/apps/v4/public/r/styles/radix-lyra/switch-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-lyra/examples/switch-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Label } from \"@/registry/radix-lyra/ui/label\"\nimport { Switch } from \"@/registry/radix-lyra/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-lyra/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/radix-lyra/ui/field\"\nimport { Label } from \"@/registry/radix-lyra/ui/label\"\nimport { Switch } from \"@/registry/radix-lyra/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchWithLabel />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
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 4b4e587e5d..5be714f8cf 100644
--- a/apps/v4/public/r/styles/radix-maia/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/radix-maia/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-maia/ui/avatar\"\nimport { Button } from \"@/registry/radix-maia/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-maia/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-maia/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/field-example.json b/apps/v4/public/r/styles/radix-maia/field-example.json
index 2f5f52ac7b..2f01947019 100644
--- a/apps/v4/public/r/styles/radix-maia/field-example.json
+++ b/apps/v4/public/r/styles/radix-maia/field-example.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/field-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-maia/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-maia/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-maia/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport { Slider } from \"@/registry/radix-maia/ui/slider\"\nimport { Switch } from \"@/registry/radix-maia/ui/switch\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"us\">United States</SelectItem>\n                <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                <SelectItem value=\"ca\">Canada</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"utc\">UTC</SelectItem>\n                <SelectItem value=\"est\">Eastern Time</SelectItem>\n                <SelectItem value=\"pst\">Pacific Time</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction HorizontalFields() {\n  return (\n    <Example title=\"Horizontal Fields\">\n      <FieldGroup className=\"**:data-[slot=field-content]:min-w-48\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-input\">Username</FieldLabel>\n            <FieldDescription>Enter your preferred username.</FieldDescription>\n          </FieldContent>\n          <Input id=\"horizontal-input\" placeholder=\"johndoe\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-textarea\">Bio</FieldLabel>\n            <FieldDescription>\n              Write a short description about yourself.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"horizontal-textarea\"\n            placeholder=\"Tell us about yourself...\"\n          />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-switch\">\n              Email Notifications\n            </FieldLabel>\n            <FieldDescription>\n              Receive email updates about your account.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"horizontal-switch\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-select\">Favorite Fruit</FieldLabel>\n            <FieldDescription>Choose your favorite fruit.</FieldDescription>\n          </FieldContent>\n          <Select>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"orange\">Orange</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-native-select\">Country</FieldLabel>\n            <FieldDescription>Select your country.</FieldDescription>\n          </FieldContent>\n          <NativeSelect id=\"horizontal-native-select\">\n            <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-slider\">Volume</FieldLabel>\n            <FieldDescription>Adjust the volume level.</FieldDescription>\n          </FieldContent>\n          <Slider id=\"horizontal-slider\" defaultValue={[50]} max={100} />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport { Badge } from \"@/registry/radix-maia/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-maia/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-maia/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-maia/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-maia/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport { Slider } from \"@/registry/radix-maia/ui/slider\"\nimport { Switch } from \"@/registry/radix-maia/ui/switch\"\nimport { Textarea } from \"@/registry/radix-maia/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"us\">United States</SelectItem>\n                <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                <SelectItem value=\"ca\">Canada</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"utc\">UTC</SelectItem>\n                <SelectItem value=\"est\">Eastern Time</SelectItem>\n                <SelectItem value=\"pst\">Pacific Time</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\">\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\">Dark mode</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\">Compact view</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\">\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\">Invalid checkbox</FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\">\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\">Free Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\">Pro Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\">Enterprise</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        </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        </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            <FieldLabel htmlFor=\"switch-profile\">\n              Make profile visible to others\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldLabel htmlFor=\"switch-email\">\n              Show email on profile\n            </FieldLabel>\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/select-example.json b/apps/v4/public/r/styles/radix-maia/select-example.json
index 6f56c6cd74..f5a10e4b1b 100644
--- a/apps/v4/public/r/styles/radix-maia/select-example.json
+++ b/apps/v4/public/r/styles/radix-maia/select-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/select-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  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-maia/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartLineIcon\"\n                  remixicon=\"RiLineChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "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  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Input } from \"@/registry/radix-maia/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-maia/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-maia/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-maia/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartLineIcon\"\n                  remixicon=\"RiLineChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0 normal-case\">\n        <ItemTitle className=\"font-sans\">{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs font-normal tracking-normal\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-maia/switch-example.json b/apps/v4/public/r/styles/radix-maia/switch-example.json
index 51d93019d9..ad2720cf6d 100644
--- a/apps/v4/public/r/styles/radix-maia/switch-example.json
+++ b/apps/v4/public/r/styles/radix-maia/switch-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-maia/examples/switch-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Label } from \"@/registry/radix-maia/ui/label\"\nimport { Switch } from \"@/registry/radix-maia/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-maia/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/radix-maia/ui/field\"\nimport { Label } from \"@/registry/radix-maia/ui/label\"\nimport { Switch } from \"@/registry/radix-maia/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchWithLabel />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
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 7d7ddd6457..8f2d23ccf0 100644
--- a/apps/v4/public/r/styles/radix-mira/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/radix-mira/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-mira/ui/avatar\"\nimport { Button } from \"@/registry/radix-mira/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-mira/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-mira/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/field-example.json b/apps/v4/public/r/styles/radix-mira/field-example.json
index 3e275e0714..83d35d79d4 100644
--- a/apps/v4/public/r/styles/radix-mira/field-example.json
+++ b/apps/v4/public/r/styles/radix-mira/field-example.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/field-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-mira/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-mira/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-mira/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-mira/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport { Slider } from \"@/registry/radix-mira/ui/slider\"\nimport { Switch } from \"@/registry/radix-mira/ui/switch\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"us\">United States</SelectItem>\n                <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                <SelectItem value=\"ca\">Canada</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"utc\">UTC</SelectItem>\n                <SelectItem value=\"est\">Eastern Time</SelectItem>\n                <SelectItem value=\"pst\">Pacific Time</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction HorizontalFields() {\n  return (\n    <Example title=\"Horizontal Fields\">\n      <FieldGroup className=\"**:data-[slot=field-content]:min-w-48\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-input\">Username</FieldLabel>\n            <FieldDescription>Enter your preferred username.</FieldDescription>\n          </FieldContent>\n          <Input id=\"horizontal-input\" placeholder=\"johndoe\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-textarea\">Bio</FieldLabel>\n            <FieldDescription>\n              Write a short description about yourself.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"horizontal-textarea\"\n            placeholder=\"Tell us about yourself...\"\n          />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-switch\">\n              Email Notifications\n            </FieldLabel>\n            <FieldDescription>\n              Receive email updates about your account.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"horizontal-switch\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-select\">Favorite Fruit</FieldLabel>\n            <FieldDescription>Choose your favorite fruit.</FieldDescription>\n          </FieldContent>\n          <Select>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"orange\">Orange</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-native-select\">Country</FieldLabel>\n            <FieldDescription>Select your country.</FieldDescription>\n          </FieldContent>\n          <NativeSelect id=\"horizontal-native-select\">\n            <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-slider\">Volume</FieldLabel>\n            <FieldDescription>Adjust the volume level.</FieldDescription>\n          </FieldContent>\n          <Slider id=\"horizontal-slider\" defaultValue={[50]} max={100} />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport { Badge } from \"@/registry/radix-mira/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-mira/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-mira/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-mira/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-mira/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport { Slider } from \"@/registry/radix-mira/ui/slider\"\nimport { Switch } from \"@/registry/radix-mira/ui/switch\"\nimport { Textarea } from \"@/registry/radix-mira/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"us\">United States</SelectItem>\n                <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                <SelectItem value=\"ca\">Canada</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"utc\">UTC</SelectItem>\n                <SelectItem value=\"est\">Eastern Time</SelectItem>\n                <SelectItem value=\"pst\">Pacific Time</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\">\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\">Dark mode</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\">Compact view</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\">\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\">Invalid checkbox</FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\">\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\">Free Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\">Pro Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\">Enterprise</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        </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        </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            <FieldLabel htmlFor=\"switch-profile\">\n              Make profile visible to others\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldLabel htmlFor=\"switch-email\">\n              Show email on profile\n            </FieldLabel>\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/select-example.json b/apps/v4/public/r/styles/radix-mira/select-example.json
index 09a7a5cc33..f466bf8516 100644
--- a/apps/v4/public/r/styles/radix-mira/select-example.json
+++ b/apps/v4/public/r/styles/radix-mira/select-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/select-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  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-mira/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartLineIcon\"\n                  remixicon=\"RiLineChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "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  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Input } from \"@/registry/radix-mira/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-mira/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-mira/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-mira/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartLineIcon\"\n                  remixicon=\"RiLineChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0 normal-case\">\n        <ItemTitle className=\"font-sans\">{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs font-normal tracking-normal\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-mira/switch-example.json b/apps/v4/public/r/styles/radix-mira/switch-example.json
index fd55441a29..750625c5d2 100644
--- a/apps/v4/public/r/styles/radix-mira/switch-example.json
+++ b/apps/v4/public/r/styles/radix-mira/switch-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-mira/examples/switch-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Label } from \"@/registry/radix-mira/ui/label\"\nimport { Switch } from \"@/registry/radix-mira/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-mira/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/radix-mira/ui/field\"\nimport { Label } from \"@/registry/radix-mira/ui/label\"\nimport { Switch } from \"@/registry/radix-mira/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchWithLabel />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
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 7b33b749da..893636a5a7 100644
--- a/apps/v4/public/r/styles/radix-nova/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/radix-nova/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-nova/ui/avatar\"\nimport { Button } from \"@/registry/radix-nova/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-nova/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-nova/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/field-example.json b/apps/v4/public/r/styles/radix-nova/field-example.json
index b136b72aaa..2e07ca691b 100644
--- a/apps/v4/public/r/styles/radix-nova/field-example.json
+++ b/apps/v4/public/r/styles/radix-nova/field-example.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/field-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-nova/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-nova/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-nova/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-nova/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport { Slider } from \"@/registry/radix-nova/ui/slider\"\nimport { Switch } from \"@/registry/radix-nova/ui/switch\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"us\">United States</SelectItem>\n                <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                <SelectItem value=\"ca\">Canada</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"utc\">UTC</SelectItem>\n                <SelectItem value=\"est\">Eastern Time</SelectItem>\n                <SelectItem value=\"pst\">Pacific Time</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction HorizontalFields() {\n  return (\n    <Example title=\"Horizontal Fields\">\n      <FieldGroup className=\"**:data-[slot=field-content]:min-w-48\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-input\">Username</FieldLabel>\n            <FieldDescription>Enter your preferred username.</FieldDescription>\n          </FieldContent>\n          <Input id=\"horizontal-input\" placeholder=\"johndoe\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-textarea\">Bio</FieldLabel>\n            <FieldDescription>\n              Write a short description about yourself.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"horizontal-textarea\"\n            placeholder=\"Tell us about yourself...\"\n          />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-switch\">\n              Email Notifications\n            </FieldLabel>\n            <FieldDescription>\n              Receive email updates about your account.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"horizontal-switch\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-select\">Favorite Fruit</FieldLabel>\n            <FieldDescription>Choose your favorite fruit.</FieldDescription>\n          </FieldContent>\n          <Select>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"orange\">Orange</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-native-select\">Country</FieldLabel>\n            <FieldDescription>Select your country.</FieldDescription>\n          </FieldContent>\n          <NativeSelect id=\"horizontal-native-select\">\n            <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-slider\">Volume</FieldLabel>\n            <FieldDescription>Adjust the volume level.</FieldDescription>\n          </FieldContent>\n          <Slider id=\"horizontal-slider\" defaultValue={[50]} max={100} />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport { Badge } from \"@/registry/radix-nova/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-nova/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-nova/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-nova/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-nova/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport { Slider } from \"@/registry/radix-nova/ui/slider\"\nimport { Switch } from \"@/registry/radix-nova/ui/switch\"\nimport { Textarea } from \"@/registry/radix-nova/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"us\">United States</SelectItem>\n                <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                <SelectItem value=\"ca\">Canada</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"utc\">UTC</SelectItem>\n                <SelectItem value=\"est\">Eastern Time</SelectItem>\n                <SelectItem value=\"pst\">Pacific Time</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\">\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\">Dark mode</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\">Compact view</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\">\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\">Invalid checkbox</FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\">\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\">Free Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\">Pro Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\">Enterprise</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        </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        </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            <FieldLabel htmlFor=\"switch-profile\">\n              Make profile visible to others\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldLabel htmlFor=\"switch-email\">\n              Show email on profile\n            </FieldLabel>\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/select-example.json b/apps/v4/public/r/styles/radix-nova/select-example.json
index 79ff3079c2..00eaa34017 100644
--- a/apps/v4/public/r/styles/radix-nova/select-example.json
+++ b/apps/v4/public/r/styles/radix-nova/select-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/select-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  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-nova/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartLineIcon\"\n                  remixicon=\"RiLineChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "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  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Input } from \"@/registry/radix-nova/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-nova/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-nova/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-nova/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartLineIcon\"\n                  remixicon=\"RiLineChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0 normal-case\">\n        <ItemTitle className=\"font-sans\">{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs font-normal tracking-normal\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-nova/switch-example.json b/apps/v4/public/r/styles/radix-nova/switch-example.json
index 5155b154f2..260ce7683a 100644
--- a/apps/v4/public/r/styles/radix-nova/switch-example.json
+++ b/apps/v4/public/r/styles/radix-nova/switch-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-nova/examples/switch-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Label } from \"@/registry/radix-nova/ui/label\"\nimport { Switch } from \"@/registry/radix-nova/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-nova/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/radix-nova/ui/field\"\nimport { Label } from \"@/registry/radix-nova/ui/label\"\nimport { Switch } from \"@/registry/radix-nova/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchWithLabel />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-sera/accordion.json b/apps/v4/public/r/styles/radix-sera/accordion.json
index 397f2d0258..27520cb7aa 100644
--- a/apps/v4/public/r/styles/radix-sera/accordion.json
+++ b/apps/v4/public/r/styles/radix-sera/accordion.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-sera/ui/accordion.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 rounded-none border border-transparent py-4 text-left text-sm font-semibold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          remixicon=\"RiArrowUpSLine\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"h-(--radix-accordion-content-height) pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Accordion as AccordionPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Accordion({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      className={cn(\"flex w-full flex-col\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\"not-last:border-b\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          \"group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 rounded-none border border-transparent py-4 text-left text-sm font-semibold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-3.5 **:data-[slot=accordion-trigger-icon]:text-muted-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconChevronDown\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowDown01Icon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden\"\n        />\n        <IconPlaceholder\n          lucide=\"ChevronUpIcon\"\n          tabler=\"IconChevronUp\"\n          data-slot=\"accordion-trigger-icon\"\n          hugeicons=\"ArrowUp01Icon\"\n          phosphor=\"CaretUpIcon\"\n          remixicon=\"RiArrowUpSLine\"\n          className=\"pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up\"\n      {...props}\n    >\n      <div\n        className={cn(\n          \"h-(--radix-accordion-content-height) pt-0 pb-4 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4\",\n          className\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Content>\n  )\n}\n\nexport { Accordion, AccordionItem, AccordionTrigger, AccordionContent }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-sera/breadcrumb.json b/apps/v4/public/r/styles/radix-sera/breadcrumb.json
index e68b1470cb..f0d6549871 100644
--- a/apps/v4/public/r/styles/radix-sera/breadcrumb.json
+++ b/apps/v4/public/r/styles/radix-sera/breadcrumb.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-sera/ui/breadcrumb.tsx",
-      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"font-normal text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-5 items-center justify-center [&>svg]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n        remixicon=\"RiMoreLine\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
+      "content": "import * as React from \"react\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Breadcrumb({ className, ...props }: React.ComponentProps<\"nav\">) {\n  return (\n    <nav\n      aria-label=\"breadcrumb\"\n      data-slot=\"breadcrumb\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n  return (\n    <ol\n      data-slot=\"breadcrumb-list\"\n      className={cn(\n        \"flex flex-wrap items-center gap-1.5 text-xs tracking-wide wrap-break-word text-muted-foreground uppercase sm:gap-2.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-item\"\n      className={cn(\"inline-flex items-center gap-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbLink({\n  asChild,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"breadcrumb-link\"\n      className={cn(\"transition-colors hover:text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-page\"\n      role=\"link\"\n      aria-disabled=\"true\"\n      aria-current=\"page\"\n      className={cn(\"font-normal text-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction BreadcrumbSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"breadcrumb-separator\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\"[&>svg]:size-3.5\", className)}\n      {...props}\n    >\n      {children ?? (\n        <IconPlaceholder\n          lucide=\"ChevronRightIcon\"\n          tabler=\"IconChevronRight\"\n          hugeicons=\"ArrowRight01Icon\"\n          phosphor=\"CaretRightIcon\"\n          remixicon=\"RiArrowRightSLine\"\n          className=\"cn-rtl-flip\"\n        />\n      )}\n    </li>\n  )\n}\n\nfunction BreadcrumbEllipsis({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"breadcrumb-ellipsis\"\n      role=\"presentation\"\n      aria-hidden=\"true\"\n      className={cn(\n        \"flex size-5 items-center justify-center [&>svg]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MoreHorizontalIcon\"\n        tabler=\"IconDots\"\n        hugeicons=\"MoreHorizontalCircle01Icon\"\n        phosphor=\"DotsThreeIcon\"\n        remixicon=\"RiMoreLine\"\n      />\n      <span className=\"sr-only\">More</span>\n    </span>\n  )\n}\n\nexport {\n  Breadcrumb,\n  BreadcrumbList,\n  BreadcrumbItem,\n  BreadcrumbLink,\n  BreadcrumbPage,\n  BreadcrumbSeparator,\n  BreadcrumbEllipsis,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-sera/button-group.json b/apps/v4/public/r/styles/radix-sera/button-group.json
index 34f6030bba..94b22dbdea 100644
--- a/apps/v4/public/r/styles/radix-sera/button-group.json
+++ b/apps/v4/public/r/styles/radix-sera/button-group.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-sera/ui/button-group.tsx",
-      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 *:data-[slot=input]:px-4 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-border has-[>[data-variant=outline]]:*:data-[slot=input-group]:px-2.5 has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-border has-[>[data-variant=outline]]:*:[[role=combobox]]:px-2.5 has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-ring has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-ring has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:[&>input]:border-border has-[>[data-variant=outline]]:[&>input:focus-visible]:border-ring\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none!\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none!\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 border border-transparent border-b-input bg-transparent px-2.5 text-xs font-semibold uppercase group-has-[>[data-variant=outline]]/button-group:border-border [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
+      "content": "import { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\n\nconst buttonGroupVariants = cva(\n  \"group/button-group flex w-fit items-stretch *:focus-visible:relative *:focus-visible:z-10 has-[>[data-slot=button-group]]:gap-2 *:data-[slot=input]:px-4 has-[>[data-variant=outline]]:*:data-[slot=input-group]:border-border has-[>[data-variant=outline]]:*:data-[slot=input-group]:px-2.5 has-[>[data-variant=outline]]:*:data-[slot=select-trigger]:border-border has-[>[data-variant=outline]]:*:[[role=combobox]]:px-2.5 has-[>[data-variant=outline]]:[&>[data-slot=input-group]:has(:focus-visible)]:border-ring has-[>[data-variant=outline]]:[&>[data-slot=select-trigger]:focus-visible]:border-ring has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-none [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[>[data-variant=outline]]:[&>input]:border-border has-[>[data-variant=outline]]:[&>input:focus-visible]:border-ring\",\n  {\n    variants: {\n      orientation: {\n        horizontal:\n          \"[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none!\",\n        vertical:\n          \"flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none [&>[data-slot]:not(:has(~[data-slot]))]:rounded-none!\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"horizontal\",\n    },\n  }\n)\n\nfunction ButtonGroup({\n  className,\n  orientation,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof buttonGroupVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"button-group\"\n      data-orientation={orientation}\n      className={cn(buttonGroupVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupText({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  asChild?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      className={cn(\n        \"flex items-center gap-2 border border-transparent border-b-input bg-transparent px-2.5 text-xs font-semibold uppercase group-has-[>[data-variant=outline]]/button-group:border-border [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ButtonGroupSeparator({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"button-group-separator\"\n      orientation={orientation}\n      className={cn(\n        \"relative self-stretch bg-input data-horizontal:mx-px data-horizontal:w-auto data-vertical:my-px data-vertical:h-auto\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ButtonGroup,\n  ButtonGroupSeparator,\n  ButtonGroupText,\n  buttonGroupVariants,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-sera/button.json b/apps/v4/public/r/styles/radix-sera/button.json
index 282f07f0cf..bee2c5178d 100644
--- a/apps/v4/public/r/styles/radix-sera/button.json
+++ b/apps/v4/public/r/styles/radix-sera/button.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-sera/ui/button.tsx",
-      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-transparent hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-input/30\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-10 gap-1.5 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4\",\n        xs: \"h-7 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-9 gap-1 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        lg: \"h-11 gap-1.5 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5\",\n        icon: \"size-10\",\n        \"icon-xs\": \"size-7 [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-9\",\n        \"icon-lg\": \"size-11\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
+      "content": "import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-transparent hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-input/30\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-10 gap-1.5 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4\",\n        xs: \"h-7 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-9 gap-1 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        lg: \"h-11 gap-1.5 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5\",\n        icon: \"size-10\",\n        \"icon-xs\": \"size-7 [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\": \"size-9\",\n        \"icon-lg\": \"size-11\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-sera/combobox.json b/apps/v4/public/r/styles/radix-sera/combobox.json
index 82f8de0236..5ffe8fe15c 100644
--- a/apps/v4/public/r/styles/radix-sera/combobox.json
+++ b/apps/v4/public/r/styles/radix-sera/combobox.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-sera/ui/combobox.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-sera/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-4\", className)}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"pointer-events-none size-4 text-muted-foreground\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        remixicon=\"RiCloseLine\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            asChild\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          >\n            <ComboboxTrigger />\n          </InputGroupButton>\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"cn-menu-target cn-menu-translucent group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1.5 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-transparent *:data-[slot=input-group]:bg-transparent *:data-[slot=input-group]:px-2.5 *:data-[slot=input-group]:focus-within:border-transparent data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1.5 overflow-y-auto overscroll-contain p-1.5 data-empty:p-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={\n          <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n        }\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\n        \"px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"-mx-1.5 my-1.5 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\n        \"flex min-h-10 flex-wrap items-center gap-1.5 rounded-none border border-transparent border-b-input bg-transparent bg-clip-padding px-0 py-1.5 text-sm transition-[color,border-color] focus-within:border-b-ring has-aria-invalid:border-b-destructive has-data-[slot=combobox-chip]:px-0 dark:has-aria-invalid:border-b-destructive/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-none bg-muted px-2 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            remixicon=\"RiCloseLine\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\"min-w-16 flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Combobox as ComboboxPrimitive } from \"@base-ui/react\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupInput,\n} from \"@/registry/radix-sera/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst Combobox = ComboboxPrimitive.Root\n\nfunction ComboboxValue({ ...props }: ComboboxPrimitive.Value.Props) {\n  return <ComboboxPrimitive.Value data-slot=\"combobox-value\" {...props} />\n}\n\nfunction ComboboxTrigger({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Trigger.Props) {\n  return (\n    <ComboboxPrimitive.Trigger\n      data-slot=\"combobox-trigger\"\n      className={cn(\"[&_svg:not([class*='size-'])]:size-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=\"pointer-events-none size-3.5 text-muted-foreground\"\n      />\n    </ComboboxPrimitive.Trigger>\n  )\n}\n\nfunction ComboboxClear({ className, ...props }: ComboboxPrimitive.Clear.Props) {\n  return (\n    <ComboboxPrimitive.Clear\n      data-slot=\"combobox-clear\"\n      render={<InputGroupButton variant=\"ghost\" size=\"icon-xs\" />}\n      className={cn(className)}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"XIcon\"\n        tabler=\"IconX\"\n        hugeicons=\"Cancel01Icon\"\n        phosphor=\"XIcon\"\n        remixicon=\"RiCloseLine\"\n        className=\"pointer-events-none\"\n      />\n    </ComboboxPrimitive.Clear>\n  )\n}\n\nfunction ComboboxInput({\n  className,\n  children,\n  disabled = false,\n  showTrigger = true,\n  showClear = false,\n  ...props\n}: ComboboxPrimitive.Input.Props & {\n  showTrigger?: boolean\n  showClear?: boolean\n}) {\n  return (\n    <InputGroup className={cn(\"w-auto\", className)}>\n      <ComboboxPrimitive.Input\n        render={<InputGroupInput disabled={disabled} />}\n        {...props}\n      />\n      <InputGroupAddon align=\"inline-end\">\n        {showTrigger && (\n          <InputGroupButton\n            size=\"icon-xs\"\n            variant=\"ghost\"\n            asChild\n            data-slot=\"input-group-button\"\n            className=\"group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent\"\n            disabled={disabled}\n          >\n            <ComboboxTrigger />\n          </InputGroupButton>\n        )}\n        {showClear && <ComboboxClear disabled={disabled} />}\n      </InputGroupAddon>\n      {children}\n    </InputGroup>\n  )\n}\n\nfunction ComboboxContent({\n  className,\n  side = \"bottom\",\n  sideOffset = 6,\n  align = \"start\",\n  alignOffset = 0,\n  anchor,\n  ...props\n}: ComboboxPrimitive.Popup.Props &\n  Pick<\n    ComboboxPrimitive.Positioner.Props,\n    \"side\" | \"align\" | \"sideOffset\" | \"alignOffset\" | \"anchor\"\n  >) {\n  return (\n    <ComboboxPrimitive.Portal>\n      <ComboboxPrimitive.Positioner\n        side={side}\n        sideOffset={sideOffset}\n        align={align}\n        alignOffset={alignOffset}\n        anchor={anchor}\n        className=\"isolate z-50\"\n      >\n        <ComboboxPrimitive.Popup\n          data-slot=\"combobox-content\"\n          data-chips={!!anchor}\n          className={cn(\n            \"cn-menu-target cn-menu-translucent group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) overflow-hidden rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[chips=true]:min-w-(--anchor-width) data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 *:data-[slot=input-group]:m-1.5 *:data-[slot=input-group]:mb-0 *:data-[slot=input-group]:h-8 *:data-[slot=input-group]:border-transparent *:data-[slot=input-group]:bg-transparent *:data-[slot=input-group]:px-2.5 *:data-[slot=input-group]:focus-within:border-transparent data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n            className\n          )}\n          {...props}\n        />\n      </ComboboxPrimitive.Positioner>\n    </ComboboxPrimitive.Portal>\n  )\n}\n\nfunction ComboboxList({ className, ...props }: ComboboxPrimitive.List.Props) {\n  return (\n    <ComboboxPrimitive.List\n      data-slot=\"combobox-list\"\n      className={cn(\n        \"no-scrollbar max-h-[min(calc(--spacing(72)---spacing(9)),calc(var(--available-height)---spacing(9)))] scroll-py-1.5 overflow-y-auto overscroll-contain p-1.5 data-empty:p-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxItem({\n  className,\n  children,\n  ...props\n}: ComboboxPrimitive.Item.Props) {\n  return (\n    <ComboboxPrimitive.Item\n      data-slot=\"combobox-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium tracking-wider uppercase outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <ComboboxPrimitive.ItemIndicator\n        render={\n          <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\" />\n        }\n      >\n        <IconPlaceholder\n          lucide=\"CheckIcon\"\n          tabler=\"IconCheck\"\n          hugeicons=\"Tick02Icon\"\n          phosphor=\"CheckIcon\"\n          remixicon=\"RiCheckLine\"\n          className=\"pointer-events-none\"\n        />\n      </ComboboxPrimitive.ItemIndicator>\n    </ComboboxPrimitive.Item>\n  )\n}\n\nfunction ComboboxGroup({ className, ...props }: ComboboxPrimitive.Group.Props) {\n  return (\n    <ComboboxPrimitive.Group\n      data-slot=\"combobox-group\"\n      className={cn(className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxLabel({\n  className,\n  ...props\n}: ComboboxPrimitive.GroupLabel.Props) {\n  return (\n    <ComboboxPrimitive.GroupLabel\n      data-slot=\"combobox-label\"\n      className={cn(\n        \"px-3 py-2 text-[0.625rem] tracking-wider text-muted-foreground uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxCollection({ ...props }: ComboboxPrimitive.Collection.Props) {\n  return (\n    <ComboboxPrimitive.Collection data-slot=\"combobox-collection\" {...props} />\n  )\n}\n\nfunction ComboboxEmpty({ className, ...props }: ComboboxPrimitive.Empty.Props) {\n  return (\n    <ComboboxPrimitive.Empty\n      data-slot=\"combobox-empty\"\n      className={cn(\n        \"hidden w-full justify-center py-2 text-center text-sm text-muted-foreground group-data-empty/combobox-content:flex\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxSeparator({\n  className,\n  ...props\n}: ComboboxPrimitive.Separator.Props) {\n  return (\n    <ComboboxPrimitive.Separator\n      data-slot=\"combobox-separator\"\n      className={cn(\"-mx-1.5 my-1.5 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChips({\n  className,\n  ...props\n}: React.ComponentPropsWithRef<typeof ComboboxPrimitive.Chips> &\n  ComboboxPrimitive.Chips.Props) {\n  return (\n    <ComboboxPrimitive.Chips\n      data-slot=\"combobox-chips\"\n      className={cn(\n        \"flex min-h-10 flex-wrap items-center gap-1.5 rounded-none border border-transparent border-b-input bg-transparent bg-clip-padding px-0 py-1.5 text-sm transition-[color,border-color] focus-within:border-b-ring has-aria-invalid:border-b-destructive has-data-[slot=combobox-chip]:px-0 dark:has-aria-invalid:border-b-destructive/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ComboboxChip({\n  className,\n  children,\n  showRemove = true,\n  ...props\n}: ComboboxPrimitive.Chip.Props & {\n  showRemove?: boolean\n}) {\n  return (\n    <ComboboxPrimitive.Chip\n      data-slot=\"combobox-chip\"\n      className={cn(\n        \"flex h-[calc(--spacing(5.5))] w-fit items-center justify-center gap-1 rounded-none bg-muted px-2 text-xs font-medium whitespace-nowrap text-foreground has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50 has-data-[slot=combobox-chip-remove]:pr-0\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {showRemove && (\n        <ComboboxPrimitive.ChipRemove\n          render={<Button variant=\"ghost\" size=\"icon-xs\" />}\n          className=\"-ml-1 opacity-50 hover:opacity-100\"\n          data-slot=\"combobox-chip-remove\"\n        >\n          <IconPlaceholder\n            lucide=\"XIcon\"\n            tabler=\"IconX\"\n            hugeicons=\"Cancel01Icon\"\n            phosphor=\"XIcon\"\n            remixicon=\"RiCloseLine\"\n            className=\"pointer-events-none\"\n          />\n        </ComboboxPrimitive.ChipRemove>\n      )}\n    </ComboboxPrimitive.Chip>\n  )\n}\n\nfunction ComboboxChipsInput({\n  className,\n  ...props\n}: ComboboxPrimitive.Input.Props) {\n  return (\n    <ComboboxPrimitive.Input\n      data-slot=\"combobox-chip-input\"\n      className={cn(\"min-w-16 flex-1 outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction useComboboxAnchor() {\n  return React.useRef<HTMLDivElement | null>(null)\n}\n\nexport {\n  Combobox,\n  ComboboxInput,\n  ComboboxContent,\n  ComboboxList,\n  ComboboxItem,\n  ComboboxGroup,\n  ComboboxLabel,\n  ComboboxCollection,\n  ComboboxEmpty,\n  ComboboxSeparator,\n  ComboboxChips,\n  ComboboxChip,\n  ComboboxChipsInput,\n  ComboboxTrigger,\n  ComboboxValue,\n  useComboboxAnchor,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-sera/command.json b/apps/v4/public/r/styles/radix-sera/command.json
index 709633e436..5d6a9feaa1 100644
--- a/apps/v4/public/r/styles/radix-sera/command.json
+++ b/apps/v4/public/r/styles/radix-sera/command.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-sera/ui/command.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/radix-sera/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/radix-sera/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex size-full flex-col overflow-hidden bg-popover text-popover-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"top-1/3 translate-y-0 overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1\">\n      <InputGroup className=\"border-transparent border-b-input bg-transparent px-3\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full px-2 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-4 shrink-0 opacity-50\"\n          />\n        </InputGroupAddon>\n      </InputGroup>\n    </div>\n  )\n}\n\nfunction CommandList({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.List>) {\n  return (\n    <CommandPrimitive.List\n      data-slot=\"command-list\"\n      className={cn(\n        \"no-scrollbar max-h-72 scroll-py-1 overflow-x-hidden overflow-y-auto outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden p-1.5 text-foreground **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-[0.625rem] **:[[cmdk-group-heading]]:font-semibold **:[[cmdk-group-heading]]:tracking-wider **:[[cmdk-group-heading]]:text-foreground **:[[cmdk-group-heading]]:uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"my-1 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"group/command-item relative flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        phosphor=\"CheckIcon\"\n        remixicon=\"RiCheckLine\"\n        className=\"ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Command as CommandPrimitive } from \"cmdk\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from \"@/registry/radix-sera/ui/dialog\"\nimport {\n  InputGroup,\n  InputGroupAddon,\n} from \"@/registry/radix-sera/ui/input-group\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Command({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive>) {\n  return (\n    <CommandPrimitive\n      data-slot=\"command\"\n      className={cn(\n        \"flex size-full flex-col overflow-hidden bg-popover text-popover-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandDialog({\n  title = \"Command Palette\",\n  description = \"Search for a command to run...\",\n  children,\n  className,\n  showCloseButton = false,\n  ...props\n}: React.ComponentProps<typeof Dialog> & {\n  title?: string\n  description?: string\n  className?: string\n  showCloseButton?: boolean\n}) {\n  return (\n    <Dialog {...props}>\n      <DialogHeader className=\"sr-only\">\n        <DialogTitle>{title}</DialogTitle>\n        <DialogDescription>{description}</DialogDescription>\n      </DialogHeader>\n      <DialogContent\n        className={cn(\"top-1/3 translate-y-0 overflow-hidden p-0\", className)}\n        showCloseButton={showCloseButton}\n      >\n        {children}\n      </DialogContent>\n    </Dialog>\n  )\n}\n\nfunction CommandInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n  return (\n    <div data-slot=\"command-input-wrapper\" className=\"p-1\">\n      <InputGroup className=\"border-transparent border-b-input bg-transparent px-3\">\n        <CommandPrimitive.Input\n          data-slot=\"command-input\"\n          className={cn(\n            \"w-full px-2 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50\",\n            className\n          )}\n          {...props}\n        />\n        <InputGroupAddon>\n          <IconPlaceholder\n            lucide=\"SearchIcon\"\n            tabler=\"IconSearch\"\n            hugeicons=\"SearchIcon\"\n            phosphor=\"MagnifyingGlassIcon\"\n            remixicon=\"RiSearchLine\"\n            className=\"size-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 overflow-x-hidden overflow-y-auto outline-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandEmpty({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n  return (\n    <CommandPrimitive.Empty\n      data-slot=\"command-empty\"\n      className={cn(\"py-6 text-center text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n  return (\n    <CommandPrimitive.Group\n      data-slot=\"command-group\"\n      className={cn(\n        \"overflow-hidden p-1.5 text-foreground **:[[cmdk-group-heading]]:px-3 **:[[cmdk-group-heading]]:py-2 **:[[cmdk-group-heading]]:text-[0.625rem] **:[[cmdk-group-heading]]:font-semibold **:[[cmdk-group-heading]]:tracking-wider **:[[cmdk-group-heading]]:text-foreground **:[[cmdk-group-heading]]:uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CommandSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n  return (\n    <CommandPrimitive.Separator\n      data-slot=\"command-separator\"\n      className={cn(\"my-1 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CommandItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof CommandPrimitive.Item>) {\n  return (\n    <CommandPrimitive.Item\n      data-slot=\"command-item\"\n      className={cn(\n        \"group/command-item relative flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 data-selected:*:[svg]:text-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"CheckIcon\"\n        tabler=\"IconCheck\"\n        hugeicons=\"Tick02Icon\"\n        phosphor=\"CheckIcon\"\n        remixicon=\"RiCheckLine\"\n        className=\"ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100\"\n      />\n    </CommandPrimitive.Item>\n  )\n}\n\nfunction CommandShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"command-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-data-selected/command-item:text-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Command,\n  CommandDialog,\n  CommandInput,\n  CommandList,\n  CommandEmpty,\n  CommandGroup,\n  CommandItem,\n  CommandShortcut,\n  CommandSeparator,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-sera/context-menu.json b/apps/v4/public/r/styles/radix-sera/context-menu.json
index 56ce4c82ce..559a7c2591 100644
--- a/apps/v4/public/r/styles/radix-sera/context-menu.json
+++ b/apps/v4/public/r/styles/radix-sera/context-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-sera/ui/context-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"cn-menu-target cn-menu-translucent z-50 max-h-(--radix-context-menu-content-available-height) min-w-48 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/context-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        className=\"cn-rtl-flip ml-auto\"\n      />\n    </ContextMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"cn-menu-target cn-menu-translucent z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase data-inset:pl-9.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"-mx-1.5 my-1.5 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ContextMenu as ContextMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction ContextMenu({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {\n  return <ContextMenuPrimitive.Root data-slot=\"context-menu\" {...props} />\n}\n\nfunction ContextMenuTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {\n  return (\n    <ContextMenuPrimitive.Trigger\n      data-slot=\"context-menu-trigger\"\n      className={cn(\"select-none\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {\n  return (\n    <ContextMenuPrimitive.Group data-slot=\"context-menu-group\" {...props} />\n  )\n}\n\nfunction ContextMenuPortal({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {\n  return (\n    <ContextMenuPrimitive.Portal data-slot=\"context-menu-portal\" {...props} />\n  )\n}\n\nfunction ContextMenuSub({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {\n  return <ContextMenuPrimitive.Sub data-slot=\"context-menu-sub\" {...props} />\n}\n\nfunction ContextMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {\n  return (\n    <ContextMenuPrimitive.RadioGroup\n      data-slot=\"context-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Content> & {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\"\n}) {\n  return (\n    <ContextMenuPrimitive.Portal>\n      <ContextMenuPrimitive.Content\n        data-slot=\"context-menu-content\"\n        className={cn(\n          \"cn-menu-target cn-menu-translucent z-50 max-h-(--radix-context-menu-content-available-height) min-w-48 origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </ContextMenuPrimitive.Portal>\n  )\n}\n\nfunction ContextMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <ContextMenuPrimitive.Item\n      data-slot=\"context-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/context-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.SubTrigger\n      data-slot=\"context-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center rounded-none px-3 py-2 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        className=\"cn-rtl-flip ml-auto\"\n      />\n    </ContextMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction ContextMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {\n  return (\n    <ContextMenuPrimitive.SubContent\n      data-slot=\"context-menu-sub-content\"\n      className={cn(\n        \"cn-menu-target cn-menu-translucent z-50 min-w-32 origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.CheckboxItem\n      data-slot=\"context-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction ContextMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.RadioItem\n      data-slot=\"context-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2\">\n        <ContextMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </ContextMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </ContextMenuPrimitive.RadioItem>\n  )\n}\n\nfunction ContextMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <ContextMenuPrimitive.Label\n      data-slot=\"context-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase data-inset:pl-9.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {\n  return (\n    <ContextMenuPrimitive.Separator\n      data-slot=\"context-menu-separator\"\n      className={cn(\"-mx-1.5 my-1.5 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction ContextMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"context-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  ContextMenu,\n  ContextMenuTrigger,\n  ContextMenuContent,\n  ContextMenuItem,\n  ContextMenuCheckboxItem,\n  ContextMenuRadioItem,\n  ContextMenuLabel,\n  ContextMenuSeparator,\n  ContextMenuShortcut,\n  ContextMenuGroup,\n  ContextMenuPortal,\n  ContextMenuSub,\n  ContextMenuSubContent,\n  ContextMenuSubTrigger,\n  ContextMenuRadioGroup,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-sera/dropdown-menu-example.json b/apps/v4/public/r/styles/radix-sera/dropdown-menu-example.json
index 1951b95425..50d302ad0c 100644
--- a/apps/v4/public/r/styles/radix-sera/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/radix-sera/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-sera/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-sera/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-sera/ui/avatar\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-sera/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-sera/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-sera/dropdown-menu.json b/apps/v4/public/r/styles/radix-sera/dropdown-menu.json
index e53926da66..d255f36a3c 100644
--- a/apps/v4/public/r/styles/radix-sera/dropdown-menu.json
+++ b/apps/v4/public/r/styles/radix-sera/dropdown-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-sera/ui/dropdown-menu.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"cn-menu-target cn-menu-translucent z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase data-inset:pl-9.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"-mx-1.5 my-1.5 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        className=\"cn-rtl-flip ml-auto\"\n      />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"cn-menu-target cn-menu-translucent z-50 min-w-36 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { DropdownMenu as DropdownMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction DropdownMenu({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n  return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />\n}\n\nfunction DropdownMenuPortal({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {\n  return (\n    <DropdownMenuPrimitive.Portal data-slot=\"dropdown-menu-portal\" {...props} />\n  )\n}\n\nfunction DropdownMenuTrigger({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n  return (\n    <DropdownMenuPrimitive.Trigger\n      data-slot=\"dropdown-menu-trigger\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuContent({\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n  return (\n    <DropdownMenuPrimitive.Portal>\n      <DropdownMenuPrimitive.Content\n        data-slot=\"dropdown-menu-content\"\n        sideOffset={sideOffset}\n        align={align}\n        className={cn(\n          \"cn-menu-target cn-menu-translucent z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-48 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:overflow-hidden data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          className\n        )}\n        {...props}\n      />\n    </DropdownMenuPrimitive.Portal>\n  )\n}\n\nfunction DropdownMenuGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n  return (\n    <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />\n  )\n}\n\nfunction DropdownMenuItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <DropdownMenuPrimitive.Item\n      data-slot=\"dropdown-menu-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 data-[variant=destructive]:*:[svg]:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.CheckboxItem\n      data-slot=\"dropdown-menu-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-checkbox-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.CheckboxItem>\n  )\n}\n\nfunction DropdownMenuRadioGroup({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {\n  return (\n    <DropdownMenuPrimitive.RadioGroup\n      data-slot=\"dropdown-menu-radio-group\"\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.RadioItem\n      data-slot=\"dropdown-menu-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    >\n      <span\n        className=\"pointer-events-none absolute right-2 flex items-center justify-center\"\n        data-slot=\"dropdown-menu-radio-item-indicator\"\n      >\n        <DropdownMenuPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </DropdownMenuPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </DropdownMenuPrimitive.RadioItem>\n  )\n}\n\nfunction DropdownMenuLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.Label\n      data-slot=\"dropdown-menu-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase data-inset:pl-9.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n  return (\n    <DropdownMenuPrimitive.Separator\n      data-slot=\"dropdown-menu-separator\"\n      className={cn(\"-mx-1.5 my-1.5 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"dropdown-menu-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction DropdownMenuSub({\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n  return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />\n}\n\nfunction DropdownMenuSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <DropdownMenuPrimitive.SubTrigger\n      data-slot=\"dropdown-menu-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        className=\"cn-rtl-flip ml-auto\"\n      />\n    </DropdownMenuPrimitive.SubTrigger>\n  )\n}\n\nfunction DropdownMenuSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n  return (\n    <DropdownMenuPrimitive.SubContent\n      data-slot=\"dropdown-menu-sub-content\"\n      className={cn(\n        \"cn-menu-target cn-menu-translucent z-50 min-w-36 origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  DropdownMenu,\n  DropdownMenuPortal,\n  DropdownMenuTrigger,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuLabel,\n  DropdownMenuItem,\n  DropdownMenuCheckboxItem,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubTrigger,\n  DropdownMenuSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-sera/field-example.json b/apps/v4/public/r/styles/radix-sera/field-example.json
index c1dcd9ddf2..5e5bd226b0 100644
--- a/apps/v4/public/r/styles/radix-sera/field-example.json
+++ b/apps/v4/public/r/styles/radix-sera/field-example.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/radix-sera/examples/field-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Badge } from \"@/registry/radix-sera/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-sera/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-sera/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-sera/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-sera/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-sera/ui/select\"\nimport { Slider } from \"@/registry/radix-sera/ui/slider\"\nimport { Switch } from \"@/registry/radix-sera/ui/switch\"\nimport { Textarea } from \"@/registry/radix-sera/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"us\">United States</SelectItem>\n                <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                <SelectItem value=\"ca\">Canada</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"utc\">UTC</SelectItem>\n                <SelectItem value=\"est\">Eastern Time</SelectItem>\n                <SelectItem value=\"pst\">Pacific Time</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction HorizontalFields() {\n  return (\n    <Example title=\"Horizontal Fields\">\n      <FieldGroup className=\"**:data-[slot=field-content]:min-w-48\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-input\">Username</FieldLabel>\n            <FieldDescription>Enter your preferred username.</FieldDescription>\n          </FieldContent>\n          <Input id=\"horizontal-input\" placeholder=\"johndoe\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-textarea\">Bio</FieldLabel>\n            <FieldDescription>\n              Write a short description about yourself.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"horizontal-textarea\"\n            placeholder=\"Tell us about yourself...\"\n          />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-switch\">\n              Email Notifications\n            </FieldLabel>\n            <FieldDescription>\n              Receive email updates about your account.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"horizontal-switch\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-select\">Favorite Fruit</FieldLabel>\n            <FieldDescription>Choose your favorite fruit.</FieldDescription>\n          </FieldContent>\n          <Select>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"orange\">Orange</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-native-select\">Country</FieldLabel>\n            <FieldDescription>Select your country.</FieldDescription>\n          </FieldContent>\n          <NativeSelect id=\"horizontal-native-select\">\n            <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-slider\">Volume</FieldLabel>\n            <FieldDescription>Adjust the volume level.</FieldDescription>\n          </FieldContent>\n          <Slider id=\"horizontal-slider\" defaultValue={[50]} max={100} />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Badge } from \"@/registry/radix-sera/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-sera/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-sera/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-sera/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-sera/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-sera/ui/select\"\nimport { Slider } from \"@/registry/radix-sera/ui/slider\"\nimport { Switch } from \"@/registry/radix-sera/ui/switch\"\nimport { Textarea } from \"@/registry/radix-sera/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"us\">United States</SelectItem>\n                <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                <SelectItem value=\"ca\">Canada</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"utc\">UTC</SelectItem>\n                <SelectItem value=\"est\">Eastern Time</SelectItem>\n                <SelectItem value=\"pst\">Pacific Time</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\">\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\">Dark mode</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\">Compact view</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\">\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\">Invalid checkbox</FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\">\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\">Free Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\">Pro Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\">Enterprise</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        </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        </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            <FieldLabel htmlFor=\"switch-profile\">\n              Make profile visible to others\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldLabel htmlFor=\"switch-email\">\n              Show email on profile\n            </FieldLabel>\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-sera/field.json b/apps/v4/public/r/styles/radix-sera/field.json
index 4ebce45213..38049398ed 100644
--- a/apps/v4/public/r/styles/radix-sera/field.json
+++ b/apps/v4/public/r/styles/radix-sera/field.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/radix-sera/ui/field.tsx",
-      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Label } from \"@/registry/radix-sera/ui/label\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-semibold uppercase data-[variant=label]:text-xs data-[variant=legend]:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-10 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-relaxed group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-4 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 text-xs font-semibold tracking-wide uppercase group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal tracking-normal text-muted-foreground normal-case group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
+      "content": "\"use client\"\n\nimport { useMemo } from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Label } from \"@/registry/radix-sera/ui/label\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\n        \"flex flex-col gap-6 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\n        \"mb-3 font-semibold uppercase data-[variant=label]:text-xs data-[variant=legend]:text-xs\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\n        \"group/field-group @container/field-group flex w-full flex-col gap-10 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\n  \"group/field flex w-full gap-3 data-[invalid=true]:text-destructive\",\n  {\n    variants: {\n      orientation: {\n        vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n        horizontal:\n          \"flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n        responsive:\n          \"flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px\",\n      },\n    },\n    defaultVariants: {\n      orientation: \"vertical\",\n    },\n  }\n)\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\n        \"group/field-content flex flex-1 flex-col gap-1 leading-snug\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-relaxed group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-none has-[>[data-slot=field]]:border *:data-[slot=field]:p-4 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10\",\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex w-fit items-center gap-2 leading-normal font-medium group-data-[disabled=true]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-sm leading-normal font-normal tracking-normal text-muted-foreground normal-case group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-1\",\n        \"[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  children?: React.ReactNode\n}) {\n  return (\n    <div\n      data-slot=\"field-separator\"\n      data-content={!!children}\n      className={cn(\n        \"relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2\",\n        className\n      )}\n      {...props}\n    >\n      <Separator className=\"absolute inset-0 top-1/2\" />\n      {children && (\n        <span\n          className=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n          data-slot=\"field-separator-content\"\n        >\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = useMemo(() => {\n    if (children) {\n      return children\n    }\n\n    if (!errors?.length) {\n      return null\n    }\n\n    const uniqueErrors = [\n      ...new Map(errors.map((error) => [error?.message, error])).values(),\n    ]\n\n    if (uniqueErrors?.length == 1) {\n      return uniqueErrors[0]?.message\n    }\n\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {uniqueErrors.map(\n          (error, index) =>\n            error?.message && <li key={index}>{error.message}</li>\n        )}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) {\n    return null\n  }\n\n  return (\n    <div\n      role=\"alert\"\n      data-slot=\"field-error\"\n      className={cn(\"text-sm font-normal text-destructive\", className)}\n      {...props}\n    >\n      {content}\n    </div>\n  )\n}\n\nexport {\n  Field,\n  FieldLabel,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldContent,\n  FieldTitle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-sera/input-group.json b/apps/v4/public/r/styles/radix-sera/input-group.json
index b0442de02c..c2748ed518 100644
--- a/apps/v4/public/r/styles/radix-sera/input-group.json
+++ b/apps/v4/public/r/styles/radix-sera/input-group.json
@@ -9,7 +9,7 @@
   "files": [
     {
       "path": "registry/radix-sera/ui/input-group.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport { Textarea } from \"@/registry/radix-sera/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-10 w-full min-w-0 items-center rounded-none border border-transparent border-b-input bg-transparent transition-[color,border-color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-none has-data-[align=block-start]:rounded-none has-[[data-slot=input-group-control]:focus-visible]:border-b-ring has-[[data-slot][aria-invalid=true]]:border-b-destructive has-[textarea]:rounded-none has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:border-b-destructive/50 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-none **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"order-first\",\n        \"inline-end\": \"order-last\",\n        \"block-start\":\n          \"order-first w-full justify-start pt-3 group-has-[>input]/input-group:pt-3.5 [.border-b]:pb-3.5\",\n        \"block-end\":\n          \"order-last w-full justify-start pb-3 group-has-[>input]/input-group:pb-3.5 [.border-t]:pt-3.5\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"flex items-center gap-2 rounded-none text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-none px-1.5 text-xs [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 text-xs has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 border-0 bg-transparent ring-0 group-has-[>[data-align=inline-end]]/input-group:pr-2 group-has-[>[data-align=inline-start]]/input-group:pl-2 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none border-0 bg-transparent py-2.5 ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport { Textarea } from \"@/registry/radix-sera/ui/textarea\"\n\nfunction InputGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-group\"\n      role=\"group\"\n      className={cn(\n        \"group/input-group relative flex h-10 w-full min-w-0 items-center rounded-none border border-transparent border-b-input bg-transparent transition-[color,border-color] outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-data-[align=block-end]:rounded-none has-data-[align=block-start]:rounded-none has-[[data-slot=input-group-control]:focus-visible]:border-b-ring has-[[data-slot][aria-invalid=true]]:border-b-destructive has-[textarea]:rounded-none has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:has-[[data-slot][aria-invalid=true]]:border-b-destructive/50 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupAddonVariants = cva(\n  \"flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-none **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      align: {\n        \"inline-start\": \"order-first\",\n        \"inline-end\": \"order-last\",\n        \"block-start\":\n          \"order-first w-full justify-start pt-3 group-has-[>input]/input-group:pt-3.5 [.border-b]:pb-3.5\",\n        \"block-end\":\n          \"order-last w-full justify-start pb-3 group-has-[>input]/input-group:pb-3.5 [.border-t]:pt-3.5\",\n      },\n    },\n    defaultVariants: {\n      align: \"inline-start\",\n    },\n  }\n)\n\nfunction InputGroupAddon({\n  className,\n  align = \"inline-start\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof inputGroupAddonVariants>) {\n  return (\n    <div\n      role=\"group\"\n      data-slot=\"input-group-addon\"\n      data-align={align}\n      className={cn(inputGroupAddonVariants({ align }), className)}\n      onClick={(e) => {\n        if ((e.target as HTMLElement).closest(\"button\")) {\n          return\n        }\n        e.currentTarget.parentElement?.querySelector(\"input\")?.focus()\n      }}\n      {...props}\n    />\n  )\n}\n\nconst inputGroupButtonVariants = cva(\n  \"flex items-center gap-2 rounded-none text-sm shadow-none\",\n  {\n    variants: {\n      size: {\n        xs: \"h-6 gap-1 rounded-none px-1.5 text-xs [&>svg:not([class*='size-'])]:size-3.5\",\n        sm: \"\",\n        \"icon-xs\": \"size-6 p-0 text-xs has-[>svg]:p-0\",\n        \"icon-sm\": \"size-8 p-0 has-[>svg]:p-0\",\n      },\n    },\n    defaultVariants: {\n      size: \"xs\",\n    },\n  }\n)\n\nfunction InputGroupButton({\n  className,\n  type = \"button\",\n  variant = \"ghost\",\n  size = \"xs\",\n  ...props\n}: Omit<React.ComponentProps<typeof Button>, \"size\"> &\n  VariantProps<typeof inputGroupButtonVariants>) {\n  return (\n    <Button\n      type={type}\n      data-size={size}\n      variant={variant}\n      className={cn(inputGroupButtonVariants({ size }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupText({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupInput({\n  className,\n  ...props\n}: React.ComponentProps<\"input\">) {\n  return (\n    <Input\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 border-0 bg-transparent ring-0 group-has-[>[data-align=inline-end]]/input-group:pr-2 group-has-[>[data-align=inline-start]]/input-group:pl-2 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputGroupTextarea({\n  className,\n  ...props\n}: React.ComponentProps<\"textarea\">) {\n  return (\n    <Textarea\n      data-slot=\"input-group-control\"\n      className={cn(\n        \"flex-1 resize-none border-0 bg-transparent py-2.5 ring-0 focus-visible:ring-0 aria-invalid:ring-0 dark:bg-transparent\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  InputGroup,\n  InputGroupAddon,\n  InputGroupButton,\n  InputGroupText,\n  InputGroupInput,\n  InputGroupTextarea,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-sera/input-otp.json b/apps/v4/public/r/styles/radix-sera/input-otp.json
index 20e86668ae..9b76157ec8 100644
--- a/apps/v4/public/r/styles/radix-sera/input-otp.json
+++ b/apps/v4/public/r/styles/radix-sera/input-otp.json
@@ -7,7 +7,7 @@
   "files": [
     {
       "path": "registry/radix-sera/ui/input-otp.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\"disabled:cursor-not-allowed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\n        \"flex items-center gap-1 rounded-none has-aria-invalid:border-b-destructive dark:has-aria-invalid:border-b-destructive/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"relative flex size-10 items-center justify-center border border-transparent border-b-input bg-transparent text-sm transition-[color,border-color] outline-none first:rounded-none last:rounded-none aria-invalid:border-b-destructive data-[active=true]:z-10 data-[active=true]:border-b-ring dark:aria-invalid:border-b-destructive/50\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"flex items-center [&_svg:not([class*='size-'])]:size-4\"\n      role=\"separator\"\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"MinusIcon\"\n        tabler=\"IconMinus\"\n        hugeicons=\"MinusSignIcon\"\n        phosphor=\"MinusIcon\"\n        remixicon=\"RiSubtractLine\"\n      />\n    </div>\n  )\n}\n\nexport { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { OTPInput, OTPInputContext } from \"input-otp\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction InputOTP({\n  className,\n  containerClassName,\n  ...props\n}: React.ComponentProps<typeof OTPInput> & {\n  containerClassName?: string\n}) {\n  return (\n    <OTPInput\n      data-slot=\"input-otp\"\n      containerClassName={cn(\n        \"cn-input-otp flex items-center has-disabled:opacity-50\",\n        containerClassName\n      )}\n      spellCheck={false}\n      className={cn(\"disabled:cursor-not-allowed\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-group\"\n      className={cn(\n        \"flex items-center gap-1 rounded-none has-aria-invalid:border-b-destructive dark:has-aria-invalid:border-b-destructive/50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction InputOTPSlot({\n  index,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  index: number\n}) {\n  const inputOTPContext = React.useContext(OTPInputContext)\n  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}\n\n  return (\n    <div\n      data-slot=\"input-otp-slot\"\n      data-active={isActive}\n      className={cn(\n        \"relative flex size-10 items-center justify-center border border-transparent border-b-input bg-transparent text-sm transition-[color,border-color] outline-none first:rounded-none last:rounded-none aria-invalid:border-b-destructive data-[active=true]:z-10 data-[active=true]:border-b-ring dark:aria-invalid:border-b-destructive/50\",\n        className\n      )}\n      {...props}\n    >\n      {char}\n      {hasFakeCaret && (\n        <div className=\"pointer-events-none absolute inset-0 flex items-center justify-center\">\n          <div className=\"h-4 w-px animate-caret-blink bg-foreground duration-1000\" />\n        </div>\n      )}\n    </div>\n  )\n}\n\nfunction InputOTPSeparator({ ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"input-otp-separator\"\n      className=\"flex items-center [&_svg:not([class*='size-'])]:size-3.5\"\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-sera/label.json b/apps/v4/public/r/styles/radix-sera/label.json
index 829bf23cd3..5dab525253 100644
--- a/apps/v4/public/r/styles/radix-sera/label.json
+++ b/apps/v4/public/r/styles/radix-sera/label.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-sera/ui/label.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label as LabelPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction Label({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-xs leading-relaxed font-semibold tracking-wide uppercase select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[slot=checkbox]:text-sm peer-data-[slot=checkbox]:font-medium peer-data-[slot=checkbox]:tracking-normal peer-data-[slot=checkbox]:normal-case peer-data-[slot=radio]:text-sm peer-data-[slot=radio]:font-medium peer-data-[slot=radio]:tracking-normal peer-data-[slot=radio]:normal-case\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label as LabelPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction Label({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-relaxed font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[slot=checkbox]:font-normal peer-data-[slot=radio-group-item]:font-normal peer-data-[slot=switch]:font-normal\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-sera/menubar.json b/apps/v4/public/r/styles/radix-sera/menubar.json
index 4daa069357..d14f958369 100644
--- a/apps/v4/public/r/styles/radix-sera/menubar.json
+++ b/apps/v4/public/r/styles/radix-sera/menubar.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-sera/ui/menubar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-10 items-center rounded-none border p-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return (\n    <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />\n  )\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"flex items-center rounded-none px-2 py-0.75 text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"cn-menu-target cn-menu-translucent z-50 min-w-48 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/menubar-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-3 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-3 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-3.5 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase data-inset:pl-9.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        className=\"cn-rtl-flip ml-auto size-4\"\n      />\n    </MenubarPrimitive.SubTrigger>\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"cn-menu-target cn-menu-translucent z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Menubar as MenubarPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Menubar({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Root>) {\n  return (\n    <MenubarPrimitive.Root\n      data-slot=\"menubar\"\n      className={cn(\n        \"flex h-10 items-center rounded-none border p-1\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarMenu({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {\n  return <MenubarPrimitive.Menu data-slot=\"menubar-menu\" {...props} />\n}\n\nfunction MenubarGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Group>) {\n  return <MenubarPrimitive.Group data-slot=\"menubar-group\" {...props} />\n}\n\nfunction MenubarPortal({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {\n  return <MenubarPrimitive.Portal data-slot=\"menubar-portal\" {...props} />\n}\n\nfunction MenubarRadioGroup({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {\n  return (\n    <MenubarPrimitive.RadioGroup data-slot=\"menubar-radio-group\" {...props} />\n  )\n}\n\nfunction MenubarTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {\n  return (\n    <MenubarPrimitive.Trigger\n      data-slot=\"menubar-trigger\"\n      className={cn(\n        \"flex items-center rounded-none px-2 py-0.75 text-sm font-medium outline-hidden select-none hover:bg-muted aria-expanded:bg-muted\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarContent({\n  className,\n  align = \"start\",\n  alignOffset = -4,\n  sideOffset = 8,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Content>) {\n  return (\n    <MenubarPortal>\n      <MenubarPrimitive.Content\n        data-slot=\"menubar-content\"\n        align={align}\n        alignOffset={alignOffset}\n        sideOffset={sideOffset}\n        className={cn(\n          \"cn-menu-target cn-menu-translucent z-50 min-w-48 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95\",\n          className\n        )}\n        {...props}\n      />\n    </MenubarPortal>\n  )\n}\n\nfunction MenubarItem({\n  className,\n  inset,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Item> & {\n  inset?: boolean\n  variant?: \"default\" | \"destructive\"\n}) {\n  return (\n    <MenubarPrimitive.Item\n      data-slot=\"menubar-item\"\n      data-inset={inset}\n      data-variant={variant}\n      className={cn(\n        \"group/menubar-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 data-[variant=destructive]:*:[svg]:text-destructive!\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarCheckboxItem({\n  className,\n  children,\n  checked,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.CheckboxItem\n      data-slot=\"menubar-checkbox-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n        className\n      )}\n      checked={checked}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-3 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.CheckboxItem>\n  )\n}\n\nfunction MenubarRadioItem({\n  className,\n  children,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.RadioItem> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.RadioItem\n      data-slot=\"menubar-radio-item\"\n      data-inset={inset}\n      className={cn(\n        \"relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute left-3 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4\">\n        <MenubarPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n          />\n        </MenubarPrimitive.ItemIndicator>\n      </span>\n      {children}\n    </MenubarPrimitive.RadioItem>\n  )\n}\n\nfunction MenubarLabel({\n  className,\n  inset,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Label> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.Label\n      data-slot=\"menubar-label\"\n      data-inset={inset}\n      className={cn(\n        \"px-3.5 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase data-inset:pl-9.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {\n  return (\n    <MenubarPrimitive.Separator\n      data-slot=\"menubar-separator\"\n      className={cn(\"-mx-1 my-1 h-px bg-border/50\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarShortcut({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"menubar-shortcut\"\n      className={cn(\n        \"ml-auto text-xs tracking-widest text-muted-foreground group-focus/menubar-item:text-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MenubarSub({\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {\n  return <MenubarPrimitive.Sub data-slot=\"menubar-sub\" {...props} />\n}\n\nfunction MenubarSubTrigger({\n  className,\n  inset,\n  children,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {\n  inset?: boolean\n}) {\n  return (\n    <MenubarPrimitive.SubTrigger\n      data-slot=\"menubar-sub-trigger\"\n      data-inset={inset}\n      className={cn(\n        \"flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-xs font-medium tracking-wider uppercase outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <IconPlaceholder\n        lucide=\"ChevronRightIcon\"\n        tabler=\"IconChevronRight\"\n        hugeicons=\"ArrowRight01Icon\"\n        phosphor=\"CaretRightIcon\"\n        remixicon=\"RiArrowRightSLine\"\n        className=\"cn-rtl-flip ml-auto size-4\"\n      />\n    </MenubarPrimitive.SubTrigger>\n  )\n}\n\nfunction MenubarSubContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {\n  return (\n    <MenubarPrimitive.SubContent\n      data-slot=\"menubar-sub-content\"\n      className={cn(\n        \"cn-menu-target cn-menu-translucent z-50 min-w-32 origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-none bg-popover p-1.5 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Menubar,\n  MenubarPortal,\n  MenubarMenu,\n  MenubarTrigger,\n  MenubarContent,\n  MenubarGroup,\n  MenubarSeparator,\n  MenubarLabel,\n  MenubarItem,\n  MenubarShortcut,\n  MenubarCheckboxItem,\n  MenubarRadioGroup,\n  MenubarRadioItem,\n  MenubarSub,\n  MenubarSubTrigger,\n  MenubarSubContent,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-sera/native-select.json b/apps/v4/public/r/styles/radix-sera/native-select.json
index b4d21f7136..bec47a9359 100644
--- a/apps/v4/public/r/styles/radix-sera/native-select.json
+++ b/apps/v4/public/r/styles/radix-sera/native-select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-sera/ui/native-select.tsx",
-      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"h-10 w-full min-w-0 appearance-none rounded-none border border-transparent border-b-input bg-transparent py-2 pr-8 pl-0 text-sm transition-[color,border-color] outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-b-ring disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-b-destructive data-[size=sm]:h-9 dark:aria-invalid:border-b-destructive/50\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"pointer-events-none absolute top-1/2 right-0 size-4 -translate-y-1/2 text-muted-foreground select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({\n  className,\n  ...props\n}: React.ComponentProps<\"option\">) {\n  return (\n    <option\n      data-slot=\"native-select-option\"\n      className={cn(\"bg-[Canvas] text-[CanvasText]\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(\"bg-[Canvas] text-[CanvasText]\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
+      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\ntype NativeSelectProps = Omit<React.ComponentProps<\"select\">, \"size\"> & {\n  size?: \"sm\" | \"default\"\n}\n\nfunction NativeSelect({\n  className,\n  size = \"default\",\n  ...props\n}: NativeSelectProps) {\n  return (\n    <div\n      className={cn(\n        \"group/native-select relative w-fit has-[select:disabled]:opacity-50\",\n        className\n      )}\n      data-slot=\"native-select-wrapper\"\n      data-size={size}\n    >\n      <select\n        data-slot=\"native-select\"\n        data-size={size}\n        className=\"h-10 w-full min-w-0 appearance-none rounded-none border border-transparent border-b-input bg-transparent py-2 pr-8 pl-0 text-sm transition-[color,border-color] outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:border-b-ring disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-b-destructive data-[size=sm]:h-9 dark:aria-invalid:border-b-destructive/50\"\n        {...props}\n      />\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconSelector\"\n        hugeicons=\"UnfoldMoreIcon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"pointer-events-none absolute top-1/2 right-0 size-3.5 -translate-y-1/2 text-muted-foreground select-none\"\n        aria-hidden=\"true\"\n        data-slot=\"native-select-icon\"\n      />\n    </div>\n  )\n}\n\nfunction NativeSelectOption({\n  className,\n  ...props\n}: React.ComponentProps<\"option\">) {\n  return (\n    <option\n      data-slot=\"native-select-option\"\n      className={cn(\"bg-[Canvas] text-[CanvasText]\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction NativeSelectOptGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"optgroup\">) {\n  return (\n    <optgroup\n      data-slot=\"native-select-optgroup\"\n      className={cn(\"bg-[Canvas] text-[CanvasText]\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { NativeSelect, NativeSelectOptGroup, NativeSelectOption }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-sera/navigation-menu.json b/apps/v4/public/r/styles/radix-sera/navigation-menu.json
index 7b434a1274..e70fa95c87 100644
--- a/apps/v4/public/r/styles/radix-sera/navigation-menu.json
+++ b/apps/v4/public/r/styles/radix-sera/navigation-menu.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-sera/ui/navigation-menu.tsx",
-      "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"group flex flex-1 list-none items-center justify-center gap-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-none px-4.5 py-2.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"top-0 left-0 w-full p-2.5 pr-3 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow-md group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 md:w-(--radix-navigation-menu-viewport-width) data-open:animate-in data-open:zoom-in-90 data-closed:animate-out data-closed:zoom-out-90\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"flex items-center gap-1.5 rounded-none p-3 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none data-[active=true]:bg-muted/50 data-[active=true]:hover:bg-muted data-[active=true]:focus:bg-muted [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-none bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n}\n",
+      "content": "import * as React from \"react\"\nimport { cva } from \"class-variance-authority\"\nimport { NavigationMenu as NavigationMenuPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction NavigationMenu({\n  className,\n  children,\n  viewport = true,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {\n  viewport?: boolean\n}) {\n  return (\n    <NavigationMenuPrimitive.Root\n      data-slot=\"navigation-menu\"\n      data-viewport={viewport}\n      className={cn(\n        \"group/navigation-menu relative flex max-w-max flex-1 items-center justify-center\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      {viewport && <NavigationMenuViewport />}\n    </NavigationMenuPrimitive.Root>\n  )\n}\n\nfunction NavigationMenuList({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {\n  return (\n    <NavigationMenuPrimitive.List\n      data-slot=\"navigation-menu-list\"\n      className={cn(\n        \"group flex flex-1 list-none items-center justify-center gap-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {\n  return (\n    <NavigationMenuPrimitive.Item\n      data-slot=\"navigation-menu-item\"\n      className={cn(\"relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst navigationMenuTriggerStyle = cva(\n  \"group/navigation-menu-trigger inline-flex h-9 w-max items-center justify-center rounded-none px-4.5 py-2.5 text-sm font-medium transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-popup-open:bg-muted/50 data-popup-open:hover:bg-muted data-open:bg-muted/50 data-open:hover:bg-muted data-open:focus:bg-muted\"\n)\n\nfunction NavigationMenuTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {\n  return (\n    <NavigationMenuPrimitive.Trigger\n      data-slot=\"navigation-menu-trigger\"\n      className={cn(navigationMenuTriggerStyle(), \"group\", className)}\n      {...props}\n    >\n      {children}{\" \"}\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n        className=\"relative top-px ml-1 size-3 transition duration-300 group-data-popup-open/navigation-menu-trigger:rotate-180 group-data-open/navigation-menu-trigger:rotate-180\"\n        aria-hidden=\"true\"\n      />\n    </NavigationMenuPrimitive.Trigger>\n  )\n}\n\nfunction NavigationMenuContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {\n  return (\n    <NavigationMenuPrimitive.Content\n      data-slot=\"navigation-menu-content\"\n      className={cn(\n        \"top-0 left-0 w-full p-2.5 pr-3 ease-[cubic-bezier(0.22,1,0.36,1)] group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-none group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:shadow-md group-data-[viewport=false]/navigation-menu:ring-1 group-data-[viewport=false]/navigation-menu:ring-foreground/10 group-data-[viewport=false]/navigation-menu:duration-300 data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 data-[motion^=from-]:animate-in data-[motion^=from-]:fade-in data-[motion^=to-]:animate-out data-[motion^=to-]:fade-out **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none md:absolute md:w-auto group-data-[viewport=false]/navigation-menu:data-open:animate-in group-data-[viewport=false]/navigation-menu:data-open:fade-in-0 group-data-[viewport=false]/navigation-menu:data-open:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-closed:animate-out group-data-[viewport=false]/navigation-menu:data-closed:fade-out-0 group-data-[viewport=false]/navigation-menu:data-closed:zoom-out-95\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {\n  return (\n    <div\n      className={cn(\n        \"absolute top-full left-0 isolate z-50 flex justify-center\"\n      )}\n    >\n      <NavigationMenuPrimitive.Viewport\n        data-slot=\"navigation-menu-viewport\"\n        className={cn(\n          \"origin-top-center relative mt-1.5 h-(--radix-navigation-menu-viewport-height) w-full overflow-hidden rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 md:w-(--radix-navigation-menu-viewport-width) data-open:animate-in data-open:zoom-in-90 data-closed:animate-out data-closed:zoom-out-90\",\n          className\n        )}\n        {...props}\n      />\n    </div>\n  )\n}\n\nfunction NavigationMenuLink({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {\n  return (\n    <NavigationMenuPrimitive.Link\n      data-slot=\"navigation-menu-link\"\n      className={cn(\n        \"flex items-center gap-1.5 rounded-none p-3 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none data-[active=true]:bg-muted/50 data-[active=true]:hover:bg-muted data-[active=true]:focus:bg-muted [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction NavigationMenuIndicator({\n  className,\n  ...props\n}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {\n  return (\n    <NavigationMenuPrimitive.Indicator\n      data-slot=\"navigation-menu-indicator\"\n      className={cn(\n        \"top-full z-1 flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:animate-in data-[state=visible]:fade-in\",\n        className\n      )}\n      {...props}\n    >\n      <div className=\"relative top-[60%] h-2 w-2 rotate-45 rounded-none bg-border shadow-md\" />\n    </NavigationMenuPrimitive.Indicator>\n  )\n}\n\nexport {\n  NavigationMenu,\n  NavigationMenuList,\n  NavigationMenuItem,\n  NavigationMenuContent,\n  NavigationMenuTrigger,\n  NavigationMenuLink,\n  NavigationMenuIndicator,\n  NavigationMenuViewport,\n  navigationMenuTriggerStyle,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-sera/select-example.json b/apps/v4/public/r/styles/radix-sera/select-example.json
index 5a84bceaac..022e953eab 100644
--- a/apps/v4/public/r/styles/radix-sera/select-example.json
+++ b/apps/v4/public/r/styles/radix-sera/select-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-sera/examples/select-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-sera/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-sera/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-sera/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-sera/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartLineIcon\"\n                  remixicon=\"RiLineChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-sera/ui/dialog\"\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-sera/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-sera/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-sera/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartLineIcon\"\n                  remixicon=\"RiLineChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0 normal-case\">\n        <ItemTitle className=\"font-sans\">{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs font-normal tracking-normal\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-sera/select.json b/apps/v4/public/r/styles/radix-sera/select.json
index 6debddadad..6602a81a9b 100644
--- a/apps/v4/public/r/styles/radix-sera/select.json
+++ b/apps/v4/public/r/styles/radix-sera/select.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-sera/ui/select.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1.5 p-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-none border border-transparent border-b-input bg-transparent px-0 py-2 text-sm whitespace-nowrap transition-[color,border-color] outline-none focus-visible:border-b-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive data-placeholder:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-b-destructive/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"pointer-events-none size-4 text-muted-foreground\"\n        />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        data-align-trigger={position === \"item-aligned\"}\n        className={cn(\n          \"cn-menu-target cn-menu-translucent relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\n        \"px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n            className=\"pointer-events-none\"\n          />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\n        \"pointer-events-none -mx-1.5 my-1.5 h-px bg-border\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n        phosphor=\"CaretUpIcon\"\n        remixicon=\"RiArrowUpSLine\"\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1.5 p-1.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-none border border-transparent border-b-input bg-transparent px-0 py-2 text-sm whitespace-nowrap transition-[color,border-color] outline-none focus-visible:border-b-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive data-placeholder:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-b-destructive/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <IconPlaceholder\n          lucide=\"ChevronDownIcon\"\n          tabler=\"IconSelector\"\n          hugeicons=\"UnfoldMoreIcon\"\n          phosphor=\"CaretDownIcon\"\n          remixicon=\"RiArrowDownSLine\"\n          className=\"pointer-events-none size-3.5 text-muted-foreground\"\n        />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        data-align-trigger={position === \"item-aligned\"}\n        className={cn(\n          \"cn-menu-target cn-menu-translucent relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\",\n          position === \"popper\" &&\n            \"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\",\n          className\n        )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\n        \"px-3 py-2 text-[0.625rem] tracking-wider text-muted-foreground uppercase\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <IconPlaceholder\n            lucide=\"CheckIcon\"\n            tabler=\"IconCheck\"\n            hugeicons=\"Tick02Icon\"\n            phosphor=\"CheckIcon\"\n            remixicon=\"RiCheckLine\"\n            className=\"pointer-events-none\"\n          />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\n        \"pointer-events-none -mx-1.5 my-1.5 h-px bg-border\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronUpIcon\"\n        tabler=\"IconChevronUp\"\n        hugeicons=\"ArrowUp01Icon\"\n        phosphor=\"CaretUpIcon\"\n        remixicon=\"RiArrowUpSLine\"\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5\",\n        className\n      )}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"ChevronDownIcon\"\n        tabler=\"IconChevronDown\"\n        hugeicons=\"ArrowDown01Icon\"\n        phosphor=\"CaretDownIcon\"\n        remixicon=\"RiArrowDownSLine\"\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-sera/sidebar.json b/apps/v4/public/r/styles/radix-sera/sidebar.json
index 4c2b6f5e29..bdfecf8ab7 100644
--- a/apps/v4/public/r/styles/radix-sera/sidebar.json
+++ b/apps/v4/public/r/styles/radix-sera/sidebar.json
@@ -13,7 +13,7 @@
   "files": [
     {
       "path": "registry/radix-sera/ui/sidebar.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { useIsMobile } from \"@/registry/radix-sera/hooks/use-mobile\"\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/radix-sera/ui/sheet\"\nimport { Skeleton } from \"@/registry/radix-sera/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-sera/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer hidden text-sidebar-foreground md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\n        \"h-8 w-full border-input bg-transparent shadow-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2 [--radius:0]\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"mx-2 w-auto bg-sidebar-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto [--radius:0] group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"flex h-8 shrink-0 items-center rounded-none px-3 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"w-full text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"flex w-full min-w-0 flex-col gap-0.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-none px-3 py-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-9 text-sm\",\n        sm: \"h-8 text-xs\",\n        lg: \"h-14 px-3 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0\",\n        showOnHover &&\n          \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-none px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"flex h-8 items-center gap-2 rounded-none px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-4 rounded-none\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-none px-3 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { useIsMobile } from \"@/registry/radix-sera/hooks/use-mobile\"\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\nimport { Button } from \"@/registry/radix-sera/ui/button\"\nimport { Input } from \"@/registry/radix-sera/ui/input\"\nimport { Separator } from \"@/registry/radix-sera/ui/separator\"\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from \"@/registry/radix-sera/ui/sheet\"\nimport { Skeleton } from \"@/registry/radix-sera/ui/skeleton\"\nimport {\n  Tooltip,\n  TooltipContent,\n  TooltipTrigger,\n} from \"@/registry/radix-sera/ui/tooltip\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nconst SIDEBAR_COOKIE_NAME = \"sidebar_state\"\nconst SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7\nconst SIDEBAR_WIDTH = \"16rem\"\nconst SIDEBAR_WIDTH_MOBILE = \"18rem\"\nconst SIDEBAR_WIDTH_ICON = \"3rem\"\nconst SIDEBAR_KEYBOARD_SHORTCUT = \"b\"\n\ntype SidebarContextProps = {\n  state: \"expanded\" | \"collapsed\"\n  open: boolean\n  setOpen: (open: boolean) => void\n  openMobile: boolean\n  setOpenMobile: (open: boolean) => void\n  isMobile: boolean\n  toggleSidebar: () => void\n}\n\nconst SidebarContext = React.createContext<SidebarContextProps | null>(null)\n\nfunction useSidebar() {\n  const context = React.useContext(SidebarContext)\n  if (!context) {\n    throw new Error(\"useSidebar must be used within a SidebarProvider.\")\n  }\n\n  return context\n}\n\nfunction SidebarProvider({\n  defaultOpen = true,\n  open: openProp,\n  onOpenChange: setOpenProp,\n  className,\n  style,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  defaultOpen?: boolean\n  open?: boolean\n  onOpenChange?: (open: boolean) => void\n}) {\n  const isMobile = useIsMobile()\n  const [openMobile, setOpenMobile] = React.useState(false)\n\n  // This is the internal state of the sidebar.\n  // We use openProp and setOpenProp for control from outside the component.\n  const [_open, _setOpen] = React.useState(defaultOpen)\n  const open = openProp ?? _open\n  const setOpen = React.useCallback(\n    (value: boolean | ((value: boolean) => boolean)) => {\n      const openState = typeof value === \"function\" ? value(open) : value\n      if (setOpenProp) {\n        setOpenProp(openState)\n      } else {\n        _setOpen(openState)\n      }\n\n      // This sets the cookie to keep the sidebar state.\n      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`\n    },\n    [setOpenProp, open]\n  )\n\n  // Helper to toggle the sidebar.\n  const toggleSidebar = React.useCallback(() => {\n    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)\n  }, [isMobile, setOpen, setOpenMobile])\n\n  // Adds a keyboard shortcut to toggle the sidebar.\n  React.useEffect(() => {\n    const handleKeyDown = (event: KeyboardEvent) => {\n      if (\n        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&\n        (event.metaKey || event.ctrlKey)\n      ) {\n        event.preventDefault()\n        toggleSidebar()\n      }\n    }\n\n    window.addEventListener(\"keydown\", handleKeyDown)\n    return () => window.removeEventListener(\"keydown\", handleKeyDown)\n  }, [toggleSidebar])\n\n  // We add a state so that we can do data-state=\"expanded\" or \"collapsed\".\n  // This makes it easier to style the sidebar with Tailwind classes.\n  const state = open ? \"expanded\" : \"collapsed\"\n\n  const contextValue = React.useMemo<SidebarContextProps>(\n    () => ({\n      state,\n      open,\n      setOpen,\n      isMobile,\n      openMobile,\n      setOpenMobile,\n      toggleSidebar,\n    }),\n    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]\n  )\n\n  return (\n    <SidebarContext.Provider value={contextValue}>\n      <div\n        data-slot=\"sidebar-wrapper\"\n        style={\n          {\n            \"--sidebar-width\": SIDEBAR_WIDTH,\n            \"--sidebar-width-icon\": SIDEBAR_WIDTH_ICON,\n            ...style,\n          } as React.CSSProperties\n        }\n        className={cn(\n          \"group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    </SidebarContext.Provider>\n  )\n}\n\nfunction Sidebar({\n  side = \"left\",\n  variant = \"sidebar\",\n  collapsible = \"offcanvas\",\n  className,\n  children,\n  dir,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  side?: \"left\" | \"right\"\n  variant?: \"sidebar\" | \"floating\" | \"inset\"\n  collapsible?: \"offcanvas\" | \"icon\" | \"none\"\n}) {\n  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()\n\n  if (collapsible === \"none\") {\n    return (\n      <div\n        data-slot=\"sidebar\"\n        className={cn(\n          \"flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground\",\n          className\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  }\n\n  if (isMobile) {\n    return (\n      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>\n        <SheetContent\n          dir={dir}\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar\"\n          data-mobile=\"true\"\n          className=\"w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden\"\n          style={\n            {\n              \"--sidebar-width\": SIDEBAR_WIDTH_MOBILE,\n            } as React.CSSProperties\n          }\n          side={side}\n        >\n          <SheetHeader className=\"sr-only\">\n            <SheetTitle>Sidebar</SheetTitle>\n            <SheetDescription>Displays the mobile sidebar.</SheetDescription>\n          </SheetHeader>\n          <div className=\"flex h-full w-full flex-col\">{children}</div>\n        </SheetContent>\n      </Sheet>\n    )\n  }\n\n  return (\n    <div\n      className=\"group peer hidden text-sidebar-foreground md:block\"\n      data-state={state}\n      data-collapsible={state === \"collapsed\" ? collapsible : \"\"}\n      data-variant={variant}\n      data-side={side}\n      data-slot=\"sidebar\"\n    >\n      {/* This is what handles the sidebar gap on desktop */}\n      <div\n        data-slot=\"sidebar-gap\"\n        className={cn(\n          \"relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear\",\n          \"group-data-[collapsible=offcanvas]:w-0\",\n          \"group-data-[side=right]:rotate-180\",\n          variant === \"floating\" || variant === \"inset\"\n            ? \"group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon)\"\n        )}\n      />\n      <div\n        data-slot=\"sidebar-container\"\n        data-side={side}\n        className={cn(\n          \"fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex\",\n          // Adjust the padding for floating and inset variants.\n          variant === \"floating\" || variant === \"inset\"\n            ? \"p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]\"\n            : \"group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l\",\n          className\n        )}\n        {...props}\n      >\n        <div\n          data-sidebar=\"sidebar\"\n          data-slot=\"sidebar-inner\"\n          className=\"flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border\"\n        >\n          {children}\n        </div>\n      </div>\n    </div>\n  )\n}\n\nfunction SidebarTrigger({\n  className,\n  onClick,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <Button\n      data-sidebar=\"trigger\"\n      data-slot=\"sidebar-trigger\"\n      variant=\"ghost\"\n      size=\"icon-sm\"\n      className={cn(className)}\n      onClick={(event) => {\n        onClick?.(event)\n        toggleSidebar()\n      }}\n      {...props}\n    >\n      <IconPlaceholder\n        lucide=\"PanelLeftIcon\"\n        tabler=\"IconLayoutSidebar\"\n        hugeicons=\"SidebarLeftIcon\"\n        phosphor=\"SidebarIcon\"\n        remixicon=\"RiSideBarLine\"\n        className=\"cn-rtl-flip\"\n      />\n      <span className=\"sr-only\">Toggle Sidebar</span>\n    </Button>\n  )\n}\n\nfunction SidebarRail({ className, ...props }: React.ComponentProps<\"button\">) {\n  const { toggleSidebar } = useSidebar()\n\n  return (\n    <button\n      data-sidebar=\"rail\"\n      data-slot=\"sidebar-rail\"\n      aria-label=\"Toggle Sidebar\"\n      tabIndex={-1}\n      onClick={toggleSidebar}\n      title=\"Toggle Sidebar\"\n      className={cn(\n        \"absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2\",\n        \"in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize\",\n        \"[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize\",\n        \"group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar\",\n        \"[[data-side=left][data-collapsible=offcanvas]_&]:-right-2\",\n        \"[[data-side=right][data-collapsible=offcanvas]_&]:-left-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInset({ className, ...props }: React.ComponentProps<\"main\">) {\n  return (\n    <main\n      data-slot=\"sidebar-inset\"\n      className={cn(\n        \"relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-none md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarInput({\n  className,\n  ...props\n}: React.ComponentProps<typeof Input>) {\n  return (\n    <Input\n      data-slot=\"sidebar-input\"\n      data-sidebar=\"input\"\n      className={cn(\n        \"h-8 w-full border-input bg-transparent shadow-none\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-header\"\n      data-sidebar=\"header\"\n      className={cn(\"flex flex-col gap-2 p-2 [--radius:0]\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-footer\"\n      data-sidebar=\"footer\"\n      className={cn(\"flex flex-col gap-2 p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof Separator>) {\n  return (\n    <Separator\n      data-slot=\"sidebar-separator\"\n      data-sidebar=\"separator\"\n      className={cn(\"mx-2 w-auto bg-sidebar-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-content\"\n      data-sidebar=\"content\"\n      className={cn(\n        \"no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto [--radius:0] group-data-[collapsible=icon]:overflow-hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group\"\n      data-sidebar=\"group\"\n      className={cn(\"relative flex w-full min-w-0 flex-col p-2\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupLabel({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"div\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"div\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-label\"\n      data-sidebar=\"group-label\"\n      className={cn(\n        \"flex h-8 shrink-0 items-center rounded-none px-3 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-3.5 [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupAction({\n  className,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-group-action\"\n      data-sidebar=\"group-action\"\n      className={cn(\n        \"absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-3.5 [&>svg]:shrink-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarGroupContent({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-group-content\"\n      data-sidebar=\"group-content\"\n      className={cn(\"w-full text-sm\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenu({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu\"\n      data-sidebar=\"menu\"\n      className={cn(\"flex w-full min-w-0 flex-col gap-0.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuItem({ className, ...props }: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-item\"\n      data-sidebar=\"menu-item\"\n      className={cn(\"group/menu-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nconst sidebarMenuButtonVariants = cva(\n  \"peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-none px-3 py-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate\",\n  {\n    variants: {\n      variant: {\n        default: \"hover:bg-sidebar-accent hover:text-sidebar-accent-foreground\",\n        outline:\n          \"bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]\",\n      },\n      size: {\n        default: \"h-9 text-sm\",\n        sm: \"h-8 text-xs\",\n        lg: \"h-14 px-3 text-sm group-data-[collapsible=icon]:p-0!\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction SidebarMenuButton({\n  asChild = false,\n  isActive = false,\n  variant = \"default\",\n  size = \"default\",\n  tooltip,\n  className,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  isActive?: boolean\n  tooltip?: string | React.ComponentProps<typeof TooltipContent>\n} & VariantProps<typeof sidebarMenuButtonVariants>) {\n  const Comp = asChild ? Slot.Root : \"button\"\n  const { isMobile, state } = useSidebar()\n\n  const button = (\n    <Comp\n      data-slot=\"sidebar-menu-button\"\n      data-sidebar=\"menu-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}\n      {...props}\n    />\n  )\n\n  if (!tooltip) {\n    return button\n  }\n\n  if (typeof tooltip === \"string\") {\n    tooltip = {\n      children: tooltip,\n    }\n  }\n\n  return (\n    <Tooltip>\n      <TooltipTrigger asChild>{button}</TooltipTrigger>\n      <TooltipContent\n        side=\"right\"\n        align=\"center\"\n        hidden={state !== \"collapsed\" || isMobile}\n        {...tooltip}\n      />\n    </Tooltip>\n  )\n}\n\nfunction SidebarMenuAction({\n  className,\n  asChild = false,\n  showOnHover = false,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean\n  showOnHover?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-action\"\n      data-sidebar=\"menu-action\"\n      className={cn(\n        \"absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-3.5 [&>svg]:shrink-0\",\n        showOnHover &&\n          \"group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuBadge({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"sidebar-menu-badge\"\n      data-sidebar=\"menu-badge\"\n      className={cn(\n        \"pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-none px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSkeleton({\n  className,\n  showIcon = false,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  showIcon?: boolean\n}) {\n  // Random width between 50 to 90%.\n  const [width] = React.useState(() => {\n    return `${Math.floor(Math.random() * 40) + 50}%`\n  })\n\n  return (\n    <div\n      data-slot=\"sidebar-menu-skeleton\"\n      data-sidebar=\"menu-skeleton\"\n      className={cn(\"flex h-8 items-center gap-2 rounded-none px-2\", className)}\n      {...props}\n    >\n      {showIcon && (\n        <Skeleton\n          className=\"size-3.5 rounded-none\"\n          data-sidebar=\"menu-skeleton-icon\"\n        />\n      )}\n      <Skeleton\n        className=\"h-4 max-w-(--skeleton-width) flex-1\"\n        data-sidebar=\"menu-skeleton-text\"\n        style={\n          {\n            \"--skeleton-width\": width,\n          } as React.CSSProperties\n        }\n      />\n    </div>\n  )\n}\n\nfunction SidebarMenuSub({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      data-slot=\"sidebar-menu-sub\"\n      data-sidebar=\"menu-sub\"\n      className={cn(\n        \"mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      data-slot=\"sidebar-menu-sub-item\"\n      data-sidebar=\"menu-sub-item\"\n      className={cn(\"group/menu-sub-item relative\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SidebarMenuSubButton({\n  asChild = false,\n  size = \"md\",\n  isActive = false,\n  className,\n  ...props\n}: React.ComponentProps<\"a\"> & {\n  asChild?: boolean\n  size?: \"sm\" | \"md\"\n  isActive?: boolean\n}) {\n  const Comp = asChild ? Slot.Root : \"a\"\n\n  return (\n    <Comp\n      data-slot=\"sidebar-menu-sub-button\"\n      data-sidebar=\"menu-sub-button\"\n      data-size={size}\n      data-active={isActive}\n      className={cn(\n        \"flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-none px-3 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-3.5 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sidebar,\n  SidebarContent,\n  SidebarFooter,\n  SidebarGroup,\n  SidebarGroupAction,\n  SidebarGroupContent,\n  SidebarGroupLabel,\n  SidebarHeader,\n  SidebarInput,\n  SidebarInset,\n  SidebarMenu,\n  SidebarMenuAction,\n  SidebarMenuBadge,\n  SidebarMenuButton,\n  SidebarMenuItem,\n  SidebarMenuSkeleton,\n  SidebarMenuSub,\n  SidebarMenuSubButton,\n  SidebarMenuSubItem,\n  SidebarProvider,\n  SidebarRail,\n  SidebarSeparator,\n  SidebarTrigger,\n  useSidebar,\n}\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-sera/switch-example.json b/apps/v4/public/r/styles/radix-sera/switch-example.json
index b3a55244c2..95b6765602 100644
--- a/apps/v4/public/r/styles/radix-sera/switch-example.json
+++ b/apps/v4/public/r/styles/radix-sera/switch-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-sera/examples/switch-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Label } from \"@/registry/radix-sera/ui/label\"\nimport { Switch } from \"@/registry/radix-sera/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-sera/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/radix-sera/ui/field\"\nimport { Label } from \"@/registry/radix-sera/ui/label\"\nimport { Switch } from \"@/registry/radix-sera/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchWithLabel />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-sera/tabs.json b/apps/v4/public/r/styles/radix-sera/tabs.json
index 7226858ee2..a2fd65af0f 100644
--- a/apps/v4/public/r/styles/radix-sera/tabs.json
+++ b/apps/v4/public/r/styles/radix-sera/tabs.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-sera/ui/tabs.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"group/tabs-list inline-flex w-fit items-center justify-center p-1 text-muted-foreground group-data-horizontal/tabs:h-10 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> &\n  VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-4 group-data-vertical/tabs:py-2 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground\",\n        \"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-sm outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"group/tabs-list inline-flex w-fit items-center justify-center p-1 text-muted-foreground group-data-horizontal/tabs:h-10 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> &\n  VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-4 group-data-vertical/tabs:py-2 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground\",\n        \"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-sm outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n",
       "type": "registry:ui"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-sera/toggle.json b/apps/v4/public/r/styles/radix-sera/toggle.json
index ac65c71010..bac107ad7b 100644
--- a/apps/v4/public/r/styles/radix-sera/toggle.json
+++ b/apps/v4/public/r/styles/radix-sera/toggle.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/radix-sera/ui/toggle.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Toggle as TogglePrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nconst toggleVariants = cva(\n  \"group/toggle inline-flex items-center justify-center gap-1.5 rounded-none text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border border-input bg-transparent hover:bg-muted\",\n      },\n      size: {\n        default:\n          \"h-10 min-w-10 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4\",\n        sm: \"h-9 min-w-9 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        lg: \"h-11 min-w-11 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants }\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Toggle as TogglePrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/registry/radix-sera/lib/utils\"\n\nconst toggleVariants = cva(\n  \"group/toggle inline-flex items-center justify-center gap-1.5 rounded-none text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline: \"border border-input bg-transparent hover:bg-muted\",\n      },\n      size: {\n        default:\n          \"h-10 min-w-10 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4\",\n        sm: \"h-9 min-w-9 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3\",\n        lg: \"h-11 min-w-11 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants }\n",
       "type": "registry:ui"
     }
   ],
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 9de0e239a0..ab6fa1acf9 100644
--- a/apps/v4/public/r/styles/radix-vega/dropdown-menu-example.json
+++ b/apps/v4/public/r/styles/radix-vega/dropdown-menu-example.json
@@ -12,7 +12,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/dropdown-menu-example.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Keyboard shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from \"@/registry/radix-vega/ui/avatar\"\nimport { Button } from \"@/registry/radix-vega/ui/button\"\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from \"@/registry/radix-vega/ui/dialog\"\nimport {\n  DropdownMenu,\n  DropdownMenuCheckboxItem,\n  DropdownMenuContent,\n  DropdownMenuGroup,\n  DropdownMenuItem,\n  DropdownMenuLabel,\n  DropdownMenuPortal,\n  DropdownMenuRadioGroup,\n  DropdownMenuRadioItem,\n  DropdownMenuSeparator,\n  DropdownMenuShortcut,\n  DropdownMenuSub,\n  DropdownMenuSubContent,\n  DropdownMenuSubTrigger,\n  DropdownMenuTrigger,\n} from \"@/registry/radix-vega/ui/dropdown-menu\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function DropdownMenuExample() {\n  return (\n    <ExampleWrapper>\n      <DropdownMenuBasic />\n      <DropdownMenuComplex />\n      <DropdownMenuWithIcons />\n      <DropdownMenuWithShortcuts />\n      <DropdownMenuWithSubmenu />\n      <DropdownMenuWithCheckboxes />\n      <DropdownMenuWithCheckboxesIcons />\n      <DropdownMenuWithRadio />\n      <DropdownMenuWithRadioIcons />\n      <DropdownMenuWithDestructive />\n      <DropdownMenuWithAvatar />\n      <DropdownMenuInDialog />\n      <DropdownMenuWithInset />\n    </ExampleWrapper>\n  )\n}\n\nfunction DropdownMenuBasic() {\n  return (\n    <Example title=\"Basic\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>Profile</DropdownMenuItem>\n            <DropdownMenuItem>Billing</DropdownMenuItem>\n            <DropdownMenuItem>Settings</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>GitHub</DropdownMenuItem>\n            <DropdownMenuItem disabled>API</DropdownMenuItem>\n            <DropdownMenuItem>Support</DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Log out\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithShortcuts() {\n  return (\n    <Example title=\"With Shortcuts\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              Shortcuts\n              <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              Log out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithSubmenu() {\n  return (\n    <Example title=\"With Submenu\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>Team</DropdownMenuItem>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>Invite users</DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>Email</DropdownMenuItem>\n                    <DropdownMenuItem>Message</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>More...</DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n            <DropdownMenuItem>\n              New Team\n              <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxes() {\n  const [showStatusBar, setShowStatusBar] = React.useState(true)\n  const [showActivityBar, setShowActivityBar] = React.useState(false)\n  const [showPanel, setShowPanel] = React.useState(false)\n\n  return (\n    <Example title=\"With Checkboxes\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Checkboxes\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-40\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showActivityBar}\n              onCheckedChange={setShowActivityBar}\n              disabled\n            >\n              <IconPlaceholder\n                lucide=\"ActivityIcon\"\n                tabler=\"IconActivity\"\n                hugeicons=\"ActivityIcon\"\n                phosphor=\"ActivityIcon\"\n                remixicon=\"RiPulseLine\"\n              />\n              Activity Bar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showPanel}\n              onCheckedChange={setShowPanel}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Panel\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadio() {\n  const [position, setPosition] = React.useState(\"bottom\")\n\n  return (\n    <Example title=\"With Radio Group\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Radio Group\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Panel Position</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={position}\n              onValueChange={setPosition}\n            >\n              <DropdownMenuRadioItem value=\"top\">\n                <IconPlaceholder\n                  lucide=\"ArrowUpIcon\"\n                  tabler=\"IconArrowUp\"\n                  hugeicons=\"ArrowUp01Icon\"\n                  phosphor=\"ArrowUpIcon\"\n                  remixicon=\"RiArrowUpLine\"\n                />\n                Top\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bottom\">\n                <IconPlaceholder\n                  lucide=\"ArrowDownIcon\"\n                  tabler=\"IconArrowDown\"\n                  hugeicons=\"ArrowDown01Icon\"\n                  phosphor=\"ArrowDownIcon\"\n                  remixicon=\"RiArrowDownLine\"\n                />\n                Bottom\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"right\" disabled>\n                <IconPlaceholder\n                  lucide=\"ArrowRightIcon\"\n                  tabler=\"IconArrowRight\"\n                  hugeicons=\"ArrowRight01Icon\"\n                  phosphor=\"ArrowRightIcon\"\n                  remixicon=\"RiArrowRightLine\"\n                />\n                Right\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithCheckboxesIcons() {\n  const [notifications, setNotifications] = React.useState({\n    email: true,\n    sms: false,\n    push: true,\n  })\n\n  return (\n    <Example title=\"Checkboxes with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Notifications\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Notification Preferences</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={notifications.email}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, email: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MailIcon\"\n                tabler=\"IconMail\"\n                hugeicons=\"MailIcon\"\n                phosphor=\"EnvelopeIcon\"\n                remixicon=\"RiMailLine\"\n              />\n              Email notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.sms}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, sms: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"MessageSquareIcon\"\n                tabler=\"IconMessage\"\n                hugeicons=\"MessageIcon\"\n                phosphor=\"ChatCircleIcon\"\n                remixicon=\"RiChat1Line\"\n              />\n              SMS notifications\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={notifications.push}\n              onCheckedChange={(checked) =>\n                setNotifications({ ...notifications, push: checked === true })\n              }\n            >\n              <IconPlaceholder\n                lucide=\"BellIcon\"\n                tabler=\"IconBell\"\n                hugeicons=\"NotificationIcon\"\n                phosphor=\"BellIcon\"\n                remixicon=\"RiNotificationLine\"\n              />\n              Push notifications\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithRadioIcons() {\n  const [paymentMethod, setPaymentMethod] = React.useState(\"card\")\n\n  return (\n    <Example title=\"Radio with Icons\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\">Payment Method</Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"min-w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Select Payment Method</DropdownMenuLabel>\n            <DropdownMenuRadioGroup\n              value={paymentMethod}\n              onValueChange={setPaymentMethod}\n            >\n              <DropdownMenuRadioItem value=\"card\">\n                <IconPlaceholder\n                  lucide=\"CreditCardIcon\"\n                  tabler=\"IconCreditCard\"\n                  hugeicons=\"CreditCardIcon\"\n                  phosphor=\"CreditCardIcon\"\n                  remixicon=\"RiBankCardLine\"\n                />\n                Credit Card\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"paypal\">\n                <IconPlaceholder\n                  lucide=\"WalletIcon\"\n                  tabler=\"IconWallet\"\n                  hugeicons=\"WalletIcon\"\n                  phosphor=\"WalletIcon\"\n                  remixicon=\"RiWalletLine\"\n                />\n                PayPal\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem value=\"bank\">\n                <IconPlaceholder\n                  lucide=\"Building2Icon\"\n                  tabler=\"IconBuildingBank\"\n                  hugeicons=\"BankIcon\"\n                  phosphor=\"BankIcon\"\n                  remixicon=\"RiBankLine\"\n                />\n                Bank Transfer\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithDestructive() {\n  return (\n    <Example title=\"With Destructive Items\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Actions\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent>\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"PencilIcon\"\n                tabler=\"IconPencil\"\n                hugeicons=\"EditIcon\"\n                phosphor=\"PencilIcon\"\n                remixicon=\"RiPencilLine\"\n              />\n              Edit\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ShareIcon\"\n                tabler=\"IconShare\"\n                hugeicons=\"ShareIcon\"\n                phosphor=\"ShareIcon\"\n                remixicon=\"RiShareLine\"\n              />\n              Share\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ArchiveIcon\"\n                tabler=\"IconArchive\"\n                hugeicons=\"Archive02Icon\"\n                phosphor=\"ArchiveIcon\"\n                remixicon=\"RiArchiveLine\"\n              />\n              Archive\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"TrashIcon\"\n                tabler=\"IconTrash\"\n                hugeicons=\"DeleteIcon\"\n                phosphor=\"TrashIcon\"\n                remixicon=\"RiDeleteBinLine\"\n              />\n              Delete\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithAvatar() {\n  const menuContent = (\n    <>\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BadgeCheckIcon\"\n            tabler=\"IconRosetteDiscountCheck\"\n            hugeicons=\"CheckmarkBadgeIcon\"\n            phosphor=\"CheckCircleIcon\"\n            remixicon=\"RiCheckboxCircleLine\"\n          />\n          Account\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"CreditCardIcon\"\n            tabler=\"IconCreditCard\"\n            hugeicons=\"CreditCardIcon\"\n            phosphor=\"CreditCardIcon\"\n            remixicon=\"RiBankCardLine\"\n          />\n          Billing\n        </DropdownMenuItem>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"BellIcon\"\n            tabler=\"IconBell\"\n            hugeicons=\"NotificationIcon\"\n            phosphor=\"BellIcon\"\n            remixicon=\"RiNotificationLine\"\n          />\n          Notifications\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n      <DropdownMenuSeparator />\n      <DropdownMenuGroup>\n        <DropdownMenuItem>\n          <IconPlaceholder\n            lucide=\"LogOutIcon\"\n            tabler=\"IconLogout\"\n            hugeicons=\"LogoutIcon\"\n            phosphor=\"SignOutIcon\"\n            remixicon=\"RiLogoutBoxLine\"\n          />\n          Sign Out\n        </DropdownMenuItem>\n      </DropdownMenuGroup>\n    </>\n  )\n\n  return (\n    <Example title=\"With Avatar\">\n      <div className=\"flex items-center justify-between gap-4\">\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button\n              variant=\"outline\"\n              className=\"h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case\"\n            >\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"Shadcn\" />\n                <AvatarFallback className=\"rounded-lg\">CN</AvatarFallback>\n              </Avatar>\n              <div className=\"grid flex-1 text-left text-sm leading-tight\">\n                <span className=\"truncate font-semibold\">shadcn</span>\n                <span className=\"truncate text-xs text-muted-foreground\">\n                  shadcn@example.com\n                </span>\n              </div>\n              <IconPlaceholder\n                lucide=\"ChevronsUpDownIcon\"\n                tabler=\"IconSelector\"\n                hugeicons=\"UnfoldMoreIcon\"\n                phosphor=\"CaretUpDownIcon\"\n                remixicon=\"RiArrowUpDownLine\"\n                className=\"ml-auto text-muted-foreground\"\n              />\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent className=\"w-(--radix-dropdown-menu-trigger-width) min-w-56\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n        <DropdownMenu>\n          <DropdownMenuTrigger asChild>\n            <Button variant=\"ghost\" size=\"icon\" className=\"rounded-full\">\n              <Avatar>\n                <AvatarImage src=\"https://github.com/shadcn.png\" alt=\"shadcn\" />\n                <AvatarFallback>LR</AvatarFallback>\n              </Avatar>\n            </Button>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\" side=\"top\">\n            {menuContent}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      </div>\n    </Example>\n  )\n}\n\nfunction DropdownMenuInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Dropdown Menu Example</DialogTitle>\n            <DialogDescription>\n              Click the button below to see the dropdown menu.\n            </DialogDescription>\n          </DialogHeader>\n          <DropdownMenu>\n            <DropdownMenuTrigger asChild>\n              <Button variant=\"outline\" className=\"w-fit\">\n                Open Menu\n              </Button>\n            </DropdownMenuTrigger>\n            <DropdownMenuContent>\n              <DropdownMenuGroup>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"CopyIcon\"\n                    tabler=\"IconCopy\"\n                    hugeicons=\"CopyIcon\"\n                    phosphor=\"CopyIcon\"\n                    remixicon=\"RiFileCopyLine\"\n                  />\n                  Copy\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ScissorsIcon\"\n                    tabler=\"IconCut\"\n                    hugeicons=\"ScissorIcon\"\n                    phosphor=\"ScissorsIcon\"\n                    remixicon=\"RiScissorsLine\"\n                  />\n                  Cut\n                </DropdownMenuItem>\n                <DropdownMenuItem>\n                  <IconPlaceholder\n                    lucide=\"ClipboardPasteIcon\"\n                    tabler=\"IconClipboard\"\n                    hugeicons=\"ClipboardIcon\"\n                    phosphor=\"ClipboardIcon\"\n                    remixicon=\"RiClipboardLine\"\n                  />\n                  Paste\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n              <DropdownMenuSeparator />\n              <DropdownMenuSub>\n                <DropdownMenuSubTrigger>More Options</DropdownMenuSubTrigger>\n                <DropdownMenuPortal>\n                  <DropdownMenuSubContent>\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                      <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                      <DropdownMenuItem>Name Window...</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                    <DropdownMenuSeparator />\n                    <DropdownMenuGroup>\n                      <DropdownMenuItem>Developer Tools</DropdownMenuItem>\n                    </DropdownMenuGroup>\n                  </DropdownMenuSubContent>\n                </DropdownMenuPortal>\n              </DropdownMenuSub>\n              <DropdownMenuSeparator />\n              <DropdownMenuGroup>\n                <DropdownMenuItem variant=\"destructive\">\n                  <IconPlaceholder\n                    lucide=\"TrashIcon\"\n                    tabler=\"IconTrash\"\n                    hugeicons=\"DeleteIcon\"\n                    phosphor=\"TrashIcon\"\n                    remixicon=\"RiDeleteBinLine\"\n                  />\n                  Delete\n                </DropdownMenuItem>\n              </DropdownMenuGroup>\n            </DropdownMenuContent>\n          </DropdownMenu>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n\nfunction DropdownMenuWithInset() {\n  const [showBookmarks, setShowBookmarks] = React.useState(true)\n  const [showUrls, setShowUrls] = React.useState(false)\n  const [theme, setTheme] = React.useState(\"system\")\n\n  return (\n    <Example title=\"With Inset\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Open\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-44\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>Actions</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CopyIcon\"\n                tabler=\"IconCopy\"\n                hugeicons=\"CopyIcon\"\n                phosphor=\"CopyIcon\"\n                remixicon=\"RiFileCopyLine\"\n              />\n              Copy\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"ScissorsIcon\"\n                tabler=\"IconCut\"\n                hugeicons=\"ScissorIcon\"\n                phosphor=\"ScissorsIcon\"\n                remixicon=\"RiScissorsLine\"\n              />\n              Cut\n            </DropdownMenuItem>\n            <DropdownMenuItem inset>Paste</DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Appearance</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showBookmarks}\n              onCheckedChange={setShowBookmarks}\n            >\n              Bookmarks\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              inset\n              checked={showUrls}\n              onCheckedChange={setShowUrls}\n            >\n              Full URLs\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel inset>Theme</DropdownMenuLabel>\n            <DropdownMenuRadioGroup value={theme} onValueChange={setTheme}>\n              <DropdownMenuRadioItem inset value=\"light\">\n                Light\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"dark\">\n                Dark\n              </DropdownMenuRadioItem>\n              <DropdownMenuRadioItem inset value=\"system\">\n                System\n              </DropdownMenuRadioItem>\n            </DropdownMenuRadioGroup>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuSub>\n            <DropdownMenuSubTrigger inset>More Options</DropdownMenuSubTrigger>\n            <DropdownMenuPortal>\n              <DropdownMenuSubContent>\n                <DropdownMenuGroup>\n                  <DropdownMenuItem>Save Page...</DropdownMenuItem>\n                  <DropdownMenuItem>Create Shortcut...</DropdownMenuItem>\n                </DropdownMenuGroup>\n              </DropdownMenuSubContent>\n            </DropdownMenuPortal>\n          </DropdownMenuSub>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n\nfunction DropdownMenuComplex() {\n  const [showSidebar, setShowSidebar] = React.useState(true)\n  const [showStatusBar, setShowStatusBar] = React.useState(false)\n\n  return (\n    <Example title=\"Complex\">\n      <DropdownMenu>\n        <DropdownMenuTrigger asChild>\n          <Button variant=\"outline\" className=\"w-fit\">\n            Complex Menu\n          </Button>\n        </DropdownMenuTrigger>\n        <DropdownMenuContent className=\"w-56\">\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>My Account</DropdownMenuLabel>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"UserIcon\"\n                tabler=\"IconUser\"\n                hugeicons=\"UserIcon\"\n                phosphor=\"UserIcon\"\n                remixicon=\"RiUserLine\"\n              />\n              Profile\n              <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"CreditCardIcon\"\n                tabler=\"IconCreditCard\"\n                hugeicons=\"CreditCardIcon\"\n                phosphor=\"CreditCardIcon\"\n                remixicon=\"RiBankCardLine\"\n              />\n              Billing\n              <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>\n            </DropdownMenuItem>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"SettingsIcon\"\n                tabler=\"IconSettings\"\n                hugeicons=\"SettingsIcon\"\n                phosphor=\"GearIcon\"\n                remixicon=\"RiSettingsLine\"\n              />\n              Settings\n              <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuLabel>View</DropdownMenuLabel>\n            <DropdownMenuCheckboxItem\n              checked={showSidebar}\n              onCheckedChange={setShowSidebar}\n            >\n              <IconPlaceholder\n                lucide=\"PanelLeftIcon\"\n                tabler=\"IconLayoutSidebar\"\n                hugeicons=\"LayoutLeftIcon\"\n                phosphor=\"SidebarIcon\"\n                remixicon=\"RiSideBarLine\"\n              />\n              Sidebar\n            </DropdownMenuCheckboxItem>\n            <DropdownMenuCheckboxItem\n              checked={showStatusBar}\n              onCheckedChange={setShowStatusBar}\n            >\n              <IconPlaceholder\n                lucide=\"LayoutIcon\"\n                tabler=\"IconLayout\"\n                hugeicons=\"LayoutIcon\"\n                phosphor=\"LayoutIcon\"\n                remixicon=\"RiLayoutLine\"\n              />\n              Status Bar\n            </DropdownMenuCheckboxItem>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuSub>\n              <DropdownMenuSubTrigger>\n                <IconPlaceholder\n                  lucide=\"UsersIcon\"\n                  tabler=\"IconUsers\"\n                  hugeicons=\"UserGroupIcon\"\n                  phosphor=\"UsersIcon\"\n                  remixicon=\"RiTeamLine\"\n                />\n                Invite Users\n              </DropdownMenuSubTrigger>\n              <DropdownMenuPortal>\n                <DropdownMenuSubContent>\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MailIcon\"\n                        tabler=\"IconMail\"\n                        hugeicons=\"MailIcon\"\n                        phosphor=\"EnvelopeIcon\"\n                        remixicon=\"RiMailLine\"\n                      />\n                      Email\n                    </DropdownMenuItem>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"MessageSquareIcon\"\n                        tabler=\"IconMessage\"\n                        hugeicons=\"MessageIcon\"\n                        phosphor=\"ChatCircleIcon\"\n                        remixicon=\"RiChat1Line\"\n                      />\n                      Message\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                  <DropdownMenuSeparator />\n                  <DropdownMenuGroup>\n                    <DropdownMenuItem>\n                      <IconPlaceholder\n                        lucide=\"PlusCircleIcon\"\n                        tabler=\"IconCirclePlus\"\n                        hugeicons=\"AddCircleIcon\"\n                        phosphor=\"PlusCircleIcon\"\n                        remixicon=\"RiAddCircleLine\"\n                      />\n                      More...\n                    </DropdownMenuItem>\n                  </DropdownMenuGroup>\n                </DropdownMenuSubContent>\n              </DropdownMenuPortal>\n            </DropdownMenuSub>\n          </DropdownMenuGroup>\n          <DropdownMenuSeparator />\n          <DropdownMenuGroup>\n            <DropdownMenuItem>\n              <IconPlaceholder\n                lucide=\"HelpCircleIcon\"\n                tabler=\"IconHelpCircle\"\n                hugeicons=\"HelpCircleIcon\"\n                phosphor=\"QuestionIcon\"\n                remixicon=\"RiQuestionLine\"\n              />\n              Support\n            </DropdownMenuItem>\n            <DropdownMenuItem variant=\"destructive\">\n              <IconPlaceholder\n                lucide=\"LogOutIcon\"\n                tabler=\"IconLogout\"\n                hugeicons=\"LogoutIcon\"\n                phosphor=\"SignOutIcon\"\n                remixicon=\"RiLogoutBoxLine\"\n              />\n              Sign Out\n              <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>\n            </DropdownMenuItem>\n          </DropdownMenuGroup>\n        </DropdownMenuContent>\n      </DropdownMenu>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/field-example.json b/apps/v4/public/r/styles/radix-vega/field-example.json
index 31eb9d3945..c79058d6ba 100644
--- a/apps/v4/public/r/styles/radix-vega/field-example.json
+++ b/apps/v4/public/r/styles/radix-vega/field-example.json
@@ -19,7 +19,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/field-example.tsx",
-      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-vega/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-vega/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-vega/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-vega/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport { Slider } from \"@/registry/radix-vega/ui/slider\"\nimport { Switch } from \"@/registry/radix-vega/ui/switch\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"us\">United States</SelectItem>\n                <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                <SelectItem value=\"ca\">Canada</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"utc\">UTC</SelectItem>\n                <SelectItem value=\"est\">Eastern Time</SelectItem>\n                <SelectItem value=\"pst\">Pacific Time</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\" className=\"font-normal\">\n            I agree to the terms and conditions\n          </FieldLabel>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"checkbox-right\">\n            Accept terms and conditions\n          </FieldLabel>\n          <Checkbox id=\"checkbox-right\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-with-desc\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"checkbox-with-desc\">\n              Subscribe to newsletter\n            </FieldLabel>\n            <FieldDescription>\n              Receive weekly updates about new features and promotions.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <FieldLabel htmlFor=\"checkbox-with-title\">\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"checkbox-with-title\" />\n            <FieldContent>\n              <FieldTitle>Enable Touch ID</FieldTitle>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </FieldLabel>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Preferences</FieldLegend>\n          <FieldDescription>\n            Select all that apply to customize your experience.\n          </FieldDescription>\n          <FieldGroup className=\"gap-3\">\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-dark\" />\n              <FieldLabel htmlFor=\"pref-dark\" className=\"font-normal\">\n                Dark mode\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\" className=\"font-normal\">\n                Compact view\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\" className=\"font-normal\">\n                Enable notifications\n              </FieldLabel>\n            </Field>\n          </FieldGroup>\n        </FieldSet>\n        <Field data-invalid orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-invalid\" aria-invalid />\n          <FieldLabel htmlFor=\"checkbox-invalid\" className=\"font-normal\">\n            Invalid checkbox\n          </FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\" className=\"font-normal\">\n            Disabled checkbox\n          </FieldLabel>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction RadioFields() {\n  return (\n    <Example title=\"Radio Fields\">\n      <FieldGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n          <RadioGroup defaultValue=\"free\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"free\" id=\"radio-free\" />\n              <FieldLabel htmlFor=\"radio-free\" className=\"font-normal\">\n                Free Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\" className=\"font-normal\">\n                Pro Plan\n              </FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\" className=\"font-normal\">\n                Enterprise\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Battery Level</FieldLegend>\n          <FieldDescription>\n            Choose your preferred battery level.\n          </FieldDescription>\n          <RadioGroup>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"high\" id=\"battery-high\" />\n              <FieldLabel htmlFor=\"battery-high\">High</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"medium\" id=\"battery-medium\" />\n              <FieldLabel htmlFor=\"battery-medium\">Medium</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"low\" id=\"battery-low\" />\n              <FieldLabel htmlFor=\"battery-low\">Low</FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <RadioGroup className=\"gap-6\">\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option1\" id=\"radio-content-1\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-1\">Enable Touch ID</FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <RadioGroupItem value=\"option2\" id=\"radio-content-2\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"radio-content-2\">\n                Enable Touch ID and Face ID to make it even faster to unlock\n                your device. This is a long label to test the layout.\n              </FieldLabel>\n              <FieldDescription>\n                Enable Touch ID to quickly unlock your device.\n              </FieldDescription>\n            </FieldContent>\n          </Field>\n        </RadioGroup>\n        <RadioGroup className=\"gap-3\">\n          <FieldLabel htmlFor=\"radio-title-1\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title1\" id=\"radio-title-1\" />\n              <FieldContent>\n                <FieldTitle>Enable Touch ID</FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n          <FieldLabel htmlFor=\"radio-title-2\">\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"title2\" id=\"radio-title-2\" />\n              <FieldContent>\n                <FieldTitle>\n                  Enable Touch ID and Face ID to make it even faster to unlock\n                  your device. This is a long label to test the layout.\n                </FieldTitle>\n                <FieldDescription>\n                  Enable Touch ID to quickly unlock your device.\n                </FieldDescription>\n              </FieldContent>\n            </Field>\n          </FieldLabel>\n        </RadioGroup>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Invalid Radio Group</FieldLegend>\n          <RadioGroup>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid1\"\n                id=\"radio-invalid-1\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-1\">\n                Invalid Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-invalid orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"invalid2\"\n                id=\"radio-invalid-2\"\n                aria-invalid\n              />\n              <FieldLabel htmlFor=\"radio-invalid-2\">\n                Invalid Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n        <FieldSet>\n          <FieldLegend variant=\"label\">Disabled Radio Group</FieldLegend>\n          <RadioGroup disabled>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled1\"\n                id=\"radio-disabled-1\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-1\">\n                Disabled Option 1\n              </FieldLabel>\n            </Field>\n            <Field data-disabled orientation=\"horizontal\">\n              <RadioGroupItem\n                value=\"disabled2\"\n                id=\"radio-disabled-2\"\n                disabled\n              />\n              <FieldLabel htmlFor=\"radio-disabled-2\">\n                Disabled Option 2\n              </FieldLabel>\n            </Field>\n          </RadioGroup>\n        </FieldSet>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SwitchFields() {\n  return (\n    <Example title=\"Switch Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-airplane\">Airplane Mode</FieldLabel>\n            <FieldDescription>\n              Turn on airplane mode to disable all connections.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-airplane\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldLabel htmlFor=\"switch-dark\">Dark Mode</FieldLabel>\n          <Switch id=\"switch-dark\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Switch id=\"switch-marketing\" />\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-marketing\">Marketing Emails</FieldLabel>\n            <FieldDescription>\n              Receive emails about new products, features, and more.\n            </FieldDescription>\n          </FieldContent>\n        </Field>\n        <Field>\n          <FieldLabel>Privacy Settings</FieldLabel>\n          <FieldDescription>Manage your privacy preferences.</FieldDescription>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-profile\" defaultChecked />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-profile\" className=\"font-normal\">\n                Make profile visible to others\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldContent>\n              <FieldLabel htmlFor=\"switch-email\" className=\"font-normal\">\n                Show email on profile\n              </FieldLabel>\n            </FieldContent>\n          </Field>\n        </Field>\n        <Field data-invalid orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-invalid\">Invalid Switch</FieldLabel>\n            <FieldDescription>\n              This switch has validation errors.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-invalid\" aria-invalid />\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"switch-disabled-field\">\n              Disabled Switch\n            </FieldLabel>\n            <FieldDescription>\n              This switch is currently disabled.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-disabled-field\" disabled />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SliderFields() {\n  const [volume, setVolume] = useState([50])\n  const [brightness, setBrightness] = useState([75])\n  const [temperature, setTemperature] = useState([0.3, 0.7])\n  const [priceRange, setPriceRange] = useState([25, 75])\n  const [colorBalance, setColorBalance] = useState([10, 20, 70])\n\n  return (\n    <Example title=\"Slider Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"slider-volume\">Volume</FieldLabel>\n          <Slider\n            id=\"slider-volume\"\n            value={volume}\n            onValueChange={setVolume}\n            max={100}\n            step={1}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-brightness\">Screen Brightness</FieldLabel>\n          <Slider\n            id=\"slider-brightness\"\n            value={brightness}\n            onValueChange={setBrightness}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            Current brightness: {brightness[0]}%\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-quality\">Video Quality</FieldLabel>\n          <FieldDescription>\n            Higher quality uses more bandwidth.\n          </FieldDescription>\n          <Slider\n            id=\"slider-quality\"\n            defaultValue={[720]}\n            max={1080}\n            min={360}\n            step={360}\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-temperature\">\n            Temperature Range\n          </FieldLabel>\n          <Slider\n            id=\"slider-temperature\"\n            value={temperature}\n            onValueChange={setTemperature}\n            min={0}\n            max={1}\n            step={0.1}\n          />\n          <FieldDescription>\n            Range: {temperature[0].toFixed(1)} - {temperature[1].toFixed(1)}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-price-range\">Price Range</FieldLabel>\n          <Slider\n            id=\"slider-price-range\"\n            value={priceRange}\n            onValueChange={setPriceRange}\n            max={100}\n            step={5}\n          />\n          <FieldDescription>\n            ${priceRange[0]} - ${priceRange[1]}\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"slider-color-balance\">Color Balance</FieldLabel>\n          <Slider\n            id=\"slider-color-balance\"\n            value={colorBalance}\n            onValueChange={setColorBalance}\n            max={100}\n            step={10}\n          />\n          <FieldDescription>\n            Red: {colorBalance[0]}%, Green: {colorBalance[1]}%, Blue:{\" \"}\n            {colorBalance[2]}%\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"slider-invalid\">Invalid Slider</FieldLabel>\n          <Slider\n            id=\"slider-invalid\"\n            defaultValue={[30]}\n            max={100}\n            aria-invalid\n          />\n          <FieldDescription>\n            This slider has validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"slider-disabled-field\">\n            Disabled Slider\n          </FieldLabel>\n          <Slider\n            id=\"slider-disabled-field\"\n            defaultValue={[50]}\n            max={100}\n            disabled\n          />\n          <FieldDescription>\n            This slider is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction InputOTPFields() {\n  const [value, setValue] = useState(\"\")\n  const [pinValue, setPinValue] = useState(\"\")\n\n  return (\n    <Example title=\"OTP Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"otp-basic\">Verification Code</FieldLabel>\n          <InputOTP id=\"otp-basic\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-with-desc\">Enter OTP</FieldLabel>\n          <InputOTP\n            id=\"otp-with-desc\"\n            maxLength={6}\n            value={value}\n            onChange={setValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the 6-digit code sent to your email.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-separator\">\n            Two-Factor Authentication\n          </FieldLabel>\n          <InputOTP id=\"otp-separator\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n            </InputOTPGroup>\n            <InputOTPSeparator />\n            <InputOTPGroup>\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter the code from your authenticator app.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"otp-pin\">PIN Code</FieldLabel>\n          <InputOTP\n            id=\"otp-pin\"\n            maxLength={4}\n            pattern={REGEXP_ONLY_DIGITS}\n            value={pinValue}\n            onChange={setPinValue}\n          >\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            Enter your 4-digit PIN (numbers only).\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"otp-invalid\">Invalid OTP</FieldLabel>\n          <InputOTP id=\"otp-invalid\" maxLength={6}>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} aria-invalid />\n              <InputOTPSlot index={1} aria-invalid />\n              <InputOTPSlot index={2} aria-invalid />\n              <InputOTPSlot index={3} aria-invalid />\n              <InputOTPSlot index={4} aria-invalid />\n              <InputOTPSlot index={5} aria-invalid />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"otp-disabled-field\">Disabled OTP</FieldLabel>\n          <InputOTP id=\"otp-disabled-field\" maxLength={6} disabled>\n            <InputOTPGroup>\n              <InputOTPSlot index={0} />\n              <InputOTPSlot index={1} />\n              <InputOTPSlot index={2} />\n              <InputOTPSlot index={3} />\n              <InputOTPSlot index={4} />\n              <InputOTPSlot index={5} />\n            </InputOTPGroup>\n          </InputOTP>\n          <FieldDescription>\n            This OTP field is currently disabled.\n          </FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction HorizontalFields() {\n  return (\n    <Example title=\"Horizontal Fields\">\n      <FieldGroup className=\"**:data-[slot=field-content]:min-w-48\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-input\">Username</FieldLabel>\n            <FieldDescription>Enter your preferred username.</FieldDescription>\n          </FieldContent>\n          <Input id=\"horizontal-input\" placeholder=\"johndoe\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-textarea\">Bio</FieldLabel>\n            <FieldDescription>\n              Write a short description about yourself.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"horizontal-textarea\"\n            placeholder=\"Tell us about yourself...\"\n          />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-switch\">\n              Email Notifications\n            </FieldLabel>\n            <FieldDescription>\n              Receive email updates about your account.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"horizontal-switch\" />\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-select\">Favorite Fruit</FieldLabel>\n            <FieldDescription>Choose your favorite fruit.</FieldDescription>\n          </FieldContent>\n          <Select>\n            <SelectTrigger id=\"horizontal-select\">\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"orange\">Orange</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-native-select\">Country</FieldLabel>\n            <FieldDescription>Select your country.</FieldDescription>\n          </FieldContent>\n          <NativeSelect id=\"horizontal-native-select\">\n            <NativeSelectOption value=\"\">Select a country</NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldLabel htmlFor=\"horizontal-slider\">Volume</FieldLabel>\n            <FieldDescription>Adjust the volume level.</FieldDescription>\n          </FieldContent>\n          <Slider id=\"horizontal-slider\" defaultValue={[50]} max={100} />\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { REGEXP_ONLY_DIGITS } from \"input-otp\"\n\nimport {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport { Badge } from \"@/registry/radix-vega/ui/badge\"\nimport { Checkbox } from \"@/registry/radix-vega/ui/checkbox\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSet,\n  FieldTitle,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  InputOTP,\n  InputOTPGroup,\n  InputOTPSeparator,\n  InputOTPSlot,\n} from \"@/registry/radix-vega/ui/input-otp\"\nimport {\n  NativeSelect,\n  NativeSelectOptGroup,\n  NativeSelectOption,\n} from \"@/registry/radix-vega/ui/native-select\"\nimport {\n  RadioGroup,\n  RadioGroupItem,\n} from \"@/registry/radix-vega/ui/radio-group\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport { Slider } from \"@/registry/radix-vega/ui/slider\"\nimport { Switch } from \"@/registry/radix-vega/ui/switch\"\nimport { Textarea } from \"@/registry/radix-vega/ui/textarea\"\n\nexport default function FieldExample() {\n  return (\n    <ExampleWrapper>\n      <InputFields />\n      <TextareaFields />\n      <SelectFields />\n      <CheckboxFields />\n      <RadioFields />\n      <SwitchFields />\n      <SliderFields />\n      <NativeSelectFields />\n      <InputOTPFields />\n      <HorizontalFields />\n    </ExampleWrapper>\n  )\n}\n\nfunction InputFields() {\n  return (\n    <Example title=\"Input Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"input-basic\">Basic Input</FieldLabel>\n          <Input id=\"input-basic\" placeholder=\"Enter text\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-with-desc\">\n            Input with Description\n          </FieldLabel>\n          <Input id=\"input-with-desc\" placeholder=\"Enter your username\" />\n          <FieldDescription>\n            Choose a unique username for your account.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-desc-first\">Email Address</FieldLabel>\n          <FieldDescription>\n            We&apos;ll never share your email with anyone.\n          </FieldDescription>\n          <Input\n            id=\"input-desc-first\"\n            type=\"email\"\n            placeholder=\"email@example.com\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-required\">\n            Required Field <span className=\"text-destructive\">*</span>\n          </FieldLabel>\n          <Input\n            id=\"input-required\"\n            placeholder=\"This field is required\"\n            required\n          />\n          <FieldDescription>This field must be filled out.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-disabled\">Disabled Input</FieldLabel>\n          <Input id=\"input-disabled\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"input-badge\">\n            Input with Badge{\" \"}\n            <Badge variant=\"secondary\" className=\"ml-auto\">\n              Recommended\n            </Badge>\n          </FieldLabel>\n          <Input id=\"input-badge\" placeholder=\"Enter value\" />\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"input-invalid\">Invalid Input</FieldLabel>\n          <Input\n            id=\"input-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"input-disabled-field\">Disabled Field</FieldLabel>\n          <Input id=\"input-disabled-field\" placeholder=\"Cannot edit\" disabled />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction TextareaFields() {\n  return (\n    <Example title=\"Textarea Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-basic\">Basic Textarea</FieldLabel>\n          <Textarea id=\"textarea-basic\" placeholder=\"Enter your message\" />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-comments\">Comments</FieldLabel>\n          <Textarea\n            id=\"textarea-comments\"\n            placeholder=\"Share your thoughts...\"\n            className=\"min-h-[100px]\"\n          />\n          <FieldDescription>Maximum 500 characters allowed.</FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-bio\">Bio</FieldLabel>\n          <FieldDescription>\n            Tell us about yourself in a few sentences.\n          </FieldDescription>\n          <Textarea\n            id=\"textarea-bio\"\n            placeholder=\"I am a...\"\n            className=\"min-h-[120px]\"\n          />\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"textarea-desc-after\">Message</FieldLabel>\n          <Textarea id=\"textarea-desc-after\" placeholder=\"Enter your message\" />\n          <FieldDescription>\n            Enter your message so it is long enough to test the layout.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"textarea-invalid\">Invalid Textarea</FieldLabel>\n          <Textarea\n            id=\"textarea-invalid\"\n            placeholder=\"This field has an error\"\n            aria-invalid\n          />\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"textarea-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Textarea\n            id=\"textarea-disabled-field\"\n            placeholder=\"Cannot edit\"\n            disabled\n          />\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction SelectFields() {\n  return (\n    <Example title=\"Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"select-basic\">Basic Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-basic\">\n              <SelectValue placeholder=\"Choose an option\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-country\">Country</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-country\">\n              <SelectValue placeholder=\"Select your country\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"us\">United States</SelectItem>\n                <SelectItem value=\"uk\">United Kingdom</SelectItem>\n                <SelectItem value=\"ca\">Canada</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <Select>\n            <SelectTrigger id=\"select-timezone\">\n              <SelectValue placeholder=\"Select timezone\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"utc\">UTC</SelectItem>\n                <SelectItem value=\"est\">Eastern Time</SelectItem>\n                <SelectItem value=\"pst\">Pacific Time</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-invalid\">Invalid Select</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-invalid\" aria-invalid>\n              <SelectValue placeholder=\"This field has an error\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <Select disabled>\n            <SelectTrigger id=\"select-disabled-field\">\n              <SelectValue placeholder=\"Cannot select\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"option1\">Option 1</SelectItem>\n                <SelectItem value=\"option2\">Option 2</SelectItem>\n                <SelectItem value=\"option3\">Option 3</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction NativeSelectFields() {\n  return (\n    <Example title=\"Native Select Fields\">\n      <FieldGroup>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-basic\">\n            Basic Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-basic\">\n            <NativeSelectOption value=\"\">Choose an option</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-country\">Country</FieldLabel>\n          <NativeSelect id=\"native-select-country\">\n            <NativeSelectOption value=\"\">\n              Select your country\n            </NativeSelectOption>\n            <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n            <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n            <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            Select the country where you currently reside.\n          </FieldDescription>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-timezone\">Timezone</FieldLabel>\n          <FieldDescription>\n            Choose your local timezone for accurate scheduling.\n          </FieldDescription>\n          <NativeSelect id=\"native-select-timezone\">\n            <NativeSelectOption value=\"\">Select timezone</NativeSelectOption>\n            <NativeSelectOption value=\"utc\">UTC</NativeSelectOption>\n            <NativeSelectOption value=\"est\">Eastern Time</NativeSelectOption>\n            <NativeSelectOption value=\"pst\">Pacific Time</NativeSelectOption>\n          </NativeSelect>\n        </Field>\n        <Field>\n          <FieldLabel htmlFor=\"native-select-grouped\">\n            Grouped Options\n          </FieldLabel>\n          <NativeSelect id=\"native-select-grouped\">\n            <NativeSelectOption value=\"\">Select a region</NativeSelectOption>\n            <NativeSelectOptGroup label=\"North America\">\n              <NativeSelectOption value=\"us\">United States</NativeSelectOption>\n              <NativeSelectOption value=\"ca\">Canada</NativeSelectOption>\n              <NativeSelectOption value=\"mx\">Mexico</NativeSelectOption>\n            </NativeSelectOptGroup>\n            <NativeSelectOptGroup label=\"Europe\">\n              <NativeSelectOption value=\"uk\">United Kingdom</NativeSelectOption>\n              <NativeSelectOption value=\"fr\">France</NativeSelectOption>\n              <NativeSelectOption value=\"de\">Germany</NativeSelectOption>\n            </NativeSelectOptGroup>\n          </NativeSelect>\n          <FieldDescription>\n            Native select with grouped options using optgroup.\n          </FieldDescription>\n        </Field>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"native-select-invalid\">\n            Invalid Native Select\n          </FieldLabel>\n          <NativeSelect id=\"native-select-invalid\" aria-invalid>\n            <NativeSelectOption value=\"\">\n              This field has an error\n            </NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>\n            This field contains validation errors.\n          </FieldDescription>\n        </Field>\n        <Field data-disabled>\n          <FieldLabel htmlFor=\"native-select-disabled-field\">\n            Disabled Field\n          </FieldLabel>\n          <NativeSelect id=\"native-select-disabled-field\" disabled>\n            <NativeSelectOption value=\"\">Cannot select</NativeSelectOption>\n            <NativeSelectOption value=\"option1\">Option 1</NativeSelectOption>\n            <NativeSelectOption value=\"option2\">Option 2</NativeSelectOption>\n            <NativeSelectOption value=\"option3\">Option 3</NativeSelectOption>\n          </NativeSelect>\n          <FieldDescription>This field is currently disabled.</FieldDescription>\n        </Field>\n      </FieldGroup>\n    </Example>\n  )\n}\n\nfunction CheckboxFields() {\n  return (\n    <Example title=\"Checkbox Fields\">\n      <FieldGroup>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-basic\" defaultChecked />\n          <FieldLabel htmlFor=\"checkbox-basic\">\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\">Dark mode</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-compact\" />\n              <FieldLabel htmlFor=\"pref-compact\">Compact view</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <Checkbox id=\"pref-notifications\" />\n              <FieldLabel htmlFor=\"pref-notifications\">\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\">Invalid checkbox</FieldLabel>\n        </Field>\n        <Field data-disabled orientation=\"horizontal\">\n          <Checkbox id=\"checkbox-disabled-field\" disabled />\n          <FieldLabel htmlFor=\"checkbox-disabled-field\">\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\">Free Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"pro\" id=\"radio-pro\" />\n              <FieldLabel htmlFor=\"radio-pro\">Pro Plan</FieldLabel>\n            </Field>\n            <Field orientation=\"horizontal\">\n              <RadioGroupItem value=\"enterprise\" id=\"radio-enterprise\" />\n              <FieldLabel htmlFor=\"radio-enterprise\">Enterprise</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        </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        </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            <FieldLabel htmlFor=\"switch-profile\">\n              Make profile visible to others\n            </FieldLabel>\n          </Field>\n          <Field orientation=\"horizontal\">\n            <Switch id=\"switch-email\" />\n            <FieldLabel htmlFor=\"switch-email\">\n              Show email on profile\n            </FieldLabel>\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/select-example.json b/apps/v4/public/r/styles/radix-vega/select-example.json
index febdd7b626..0cb5d86aad 100644
--- a/apps/v4/public/r/styles/radix-vega/select-example.json
+++ b/apps/v4/public/r/styles/radix-vega/select-example.json
@@ -15,7 +15,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/select-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  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-vega/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartLineIcon\"\n                  remixicon=\"RiLineChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0\">\n        <ItemTitle>{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
+      "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  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Input } from \"@/registry/radix-vega/ui/input\"\nimport {\n  Item,\n  ItemContent,\n  ItemDescription,\n  ItemTitle,\n} from \"@/registry/radix-vega/ui/item\"\nimport {\n  NativeSelect,\n  NativeSelectOption,\n} from \"@/registry/radix-vega/ui/native-select\"\nimport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/radix-vega/ui/select\"\nimport { IconPlaceholder } from \"@/app/(create)/components/icon-placeholder\"\n\nexport default function SelectExample() {\n  return (\n    <ExampleWrapper>\n      <SelectBasic />\n      <SelectWithIcons />\n      <SelectWithGroups />\n      <SelectLargeList />\n      <SelectSizes />\n      <SelectPlan />\n      <SelectWithButton />\n      <SelectItemAligned />\n      <SelectWithField />\n      <SelectInvalid />\n      <SelectInline />\n      <SelectDisabled />\n      <SelectInDialog />\n    </ExampleWrapper>\n  )\n}\n\nfunction SelectBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithIcons() {\n  return (\n    <Example title=\"With Icons\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue\n              placeholder={\n                <>\n                  <IconPlaceholder\n                    lucide=\"ChartLineIcon\"\n                    tabler=\"IconChartLine\"\n                    hugeicons=\"Chart03Icon\"\n                    phosphor=\"ChartLineIcon\"\n                    remixicon=\"RiLineChartLine\"\n                  />\n                  Chart Type\n                </>\n              }\n            />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"line\">\n                <IconPlaceholder\n                  lucide=\"ChartLineIcon\"\n                  tabler=\"IconChartLine\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartLineIcon\"\n                  remixicon=\"RiLineChartLine\"\n                />\n                Line\n              </SelectItem>\n              <SelectItem value=\"bar\">\n                <IconPlaceholder\n                  lucide=\"ChartBarIcon\"\n                  tabler=\"IconChartBar\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartBarIcon\"\n                  remixicon=\"RiBarChartLine\"\n                />\n                Bar\n              </SelectItem>\n              <SelectItem value=\"pie\">\n                <IconPlaceholder\n                  lucide=\"ChartPieIcon\"\n                  tabler=\"IconChartPie\"\n                  hugeicons=\"Chart03Icon\"\n                  phosphor=\"ChartPieIcon\"\n                  remixicon=\"RiPieChartLine\"\n                />\n                Pie\n              </SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithGroups() {\n  return (\n    <Example title=\"With Groups & Labels\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectLabel>Fruits</SelectLabel>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n          </SelectGroup>\n          <SelectSeparator />\n          <SelectGroup>\n            <SelectLabel>Vegetables</SelectLabel>\n            <SelectItem value=\"carrot\">Carrot</SelectItem>\n            <SelectItem value=\"broccoli\">Broccoli</SelectItem>\n            <SelectItem value=\"spinach\">Spinach</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectLargeList() {\n  return (\n    <Example title=\"Large List\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select an item\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {Array.from({ length: 100 }).map((_, i) => (\n              <SelectItem key={i} value={`item-${i}`}>\n                Item {i}\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger size=\"sm\">\n            <SelectValue placeholder=\"Small size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Select>\n          <SelectTrigger size=\"default\">\n            <SelectValue placeholder=\"Default size\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectWithButton() {\n  return (\n    <Example title=\"With Button\">\n      <div className=\"flex flex-col gap-4\">\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger size=\"sm\">\n              <SelectValue placeholder=\"Small\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\" size=\"sm\">\n            Submit\n          </Button>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Default\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <Button variant=\"outline\">Submit</Button>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectItemAligned() {\n  return (\n    <Example title=\"Popper\">\n      <Select>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Select a fruit\" />\n        </SelectTrigger>\n        <SelectContent position=\"popper\">\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectWithField() {\n  return (\n    <Example title=\"With Field\">\n      <Field>\n        <FieldLabel htmlFor=\"select-fruit\">Favorite Fruit</FieldLabel>\n        <Select>\n          <SelectTrigger id=\"select-fruit\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <FieldDescription>\n          Choose your favorite fruit from the list.\n        </FieldDescription>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SelectInvalid() {\n  return (\n    <Example title=\"Invalid\">\n      <div className=\"flex flex-col gap-4\">\n        <Select>\n          <SelectTrigger aria-invalid=\"true\">\n            <SelectValue placeholder=\"Select a fruit\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"apple\">Apple</SelectItem>\n              <SelectItem value=\"banana\">Banana</SelectItem>\n              <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n              <SelectItem value=\"grapes\">Grapes</SelectItem>\n              <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <Field data-invalid>\n          <FieldLabel htmlFor=\"select-fruit-invalid\">Favorite Fruit</FieldLabel>\n          <Select>\n            <SelectTrigger id=\"select-fruit-invalid\" aria-invalid>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n          <FieldError errors={[{ message: \"Please select a valid fruit.\" }]} />\n        </Field>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectInline() {\n  return (\n    <Example title=\"Inline with Input & NativeSelect\">\n      <div className=\"flex items-center gap-2\">\n        <Input placeholder=\"Search...\" className=\"flex-1\" />\n        <Select>\n          <SelectTrigger className=\"w-[140px]\">\n            <SelectValue placeholder=\"Filter\" />\n          </SelectTrigger>\n          <SelectContent>\n            <SelectGroup>\n              <SelectItem value=\"all\">All</SelectItem>\n              <SelectItem value=\"active\">Active</SelectItem>\n              <SelectItem value=\"inactive\">Inactive</SelectItem>\n            </SelectGroup>\n          </SelectContent>\n        </Select>\n        <NativeSelect className=\"w-[140px]\">\n          <NativeSelectOption value=\"\">Sort by</NativeSelectOption>\n          <NativeSelectOption value=\"name\">Name</NativeSelectOption>\n          <NativeSelectOption value=\"date\">Date</NativeSelectOption>\n          <NativeSelectOption value=\"status\">Status</NativeSelectOption>\n        </NativeSelect>\n      </div>\n    </Example>\n  )\n}\n\nfunction SelectDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <Select disabled>\n        <SelectTrigger>\n          <SelectValue placeholder=\"Disabled\" />\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            <SelectItem value=\"apple\">Apple</SelectItem>\n            <SelectItem value=\"banana\">Banana</SelectItem>\n            <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n            <SelectItem value=\"grapes\" disabled>\n              Grapes\n            </SelectItem>\n            <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nconst plans = [\n  {\n    name: \"Starter\",\n    description: \"Perfect for individuals getting started.\",\n  },\n  {\n    name: \"Professional\",\n    description: \"Ideal for growing teams and businesses.\",\n  },\n  {\n    name: \"Enterprise\",\n    description: \"Advanced features for large organizations.\",\n  },\n]\n\nfunction SelectPlan() {\n  const [plan, setPlan] = React.useState<string>(plans[0].name)\n\n  const selectedPlan = plans.find((p) => p.name === plan)\n\n  return (\n    <Example title=\"Subscription Plan\">\n      <Select value={plan} onValueChange={setPlan}>\n        <SelectTrigger className=\"h-auto! w-72\">\n          <SelectValue>\n            {selectedPlan && <SelectPlanItem plan={selectedPlan} />}\n          </SelectValue>\n        </SelectTrigger>\n        <SelectContent>\n          <SelectGroup>\n            {plans.map((plan) => (\n              <SelectItem key={plan.name} value={plan.name}>\n                <SelectPlanItem plan={plan} />\n              </SelectItem>\n            ))}\n          </SelectGroup>\n        </SelectContent>\n      </Select>\n    </Example>\n  )\n}\n\nfunction SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {\n  return (\n    <Item size=\"xs\" className=\"w-full p-0\">\n      <ItemContent className=\"gap-0 normal-case\">\n        <ItemTitle className=\"font-sans\">{plan.name}</ItemTitle>\n        <ItemDescription className=\"text-xs font-normal tracking-normal\">\n          {plan.description}\n        </ItemDescription>\n      </ItemContent>\n    </Item>\n  )\n}\n\nfunction SelectInDialog() {\n  return (\n    <Example title=\"In Dialog\">\n      <Dialog>\n        <DialogTrigger asChild>\n          <Button variant=\"outline\">Open Dialog</Button>\n        </DialogTrigger>\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>Select Example</DialogTitle>\n            <DialogDescription>\n              Use the select below to choose a fruit.\n            </DialogDescription>\n          </DialogHeader>\n          <Select>\n            <SelectTrigger>\n              <SelectValue placeholder=\"Select a fruit\" />\n            </SelectTrigger>\n            <SelectContent>\n              <SelectGroup>\n                <SelectItem value=\"apple\">Apple</SelectItem>\n                <SelectItem value=\"banana\">Banana</SelectItem>\n                <SelectItem value=\"blueberry\">Blueberry</SelectItem>\n                <SelectItem value=\"grapes\">Grapes</SelectItem>\n                <SelectItem value=\"pineapple\">Pineapple</SelectItem>\n              </SelectGroup>\n            </SelectContent>\n          </Select>\n        </DialogContent>\n      </Dialog>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/public/r/styles/radix-vega/switch-example.json b/apps/v4/public/r/styles/radix-vega/switch-example.json
index c7851344dd..01959edda1 100644
--- a/apps/v4/public/r/styles/radix-vega/switch-example.json
+++ b/apps/v4/public/r/styles/radix-vega/switch-example.json
@@ -11,7 +11,7 @@
   "files": [
     {
       "path": "registry/radix-vega/examples/switch-example.tsx",
-      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Label } from \"@/registry/radix-vega/ui/label\"\nimport { Switch } from \"@/registry/radix-vega/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
+      "content": "import {\n  Example,\n  ExampleWrapper,\n} from \"@/registry/radix-vega/components/example\"\nimport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldLabel,\n  FieldTitle,\n} from \"@/registry/radix-vega/ui/field\"\nimport { Label } from \"@/registry/radix-vega/ui/label\"\nimport { Switch } from \"@/registry/radix-vega/ui/switch\"\n\nexport default function SwitchExample() {\n  return (\n    <ExampleWrapper>\n      <SwitchBasic />\n      <SwitchWithDescription />\n      <SwitchWithLabel />\n      <SwitchDisabled />\n      <SwitchSizes />\n    </ExampleWrapper>\n  )\n}\n\nfunction SwitchBasic() {\n  return (\n    <Example title=\"Basic\">\n      <Field orientation=\"horizontal\">\n        <Switch id=\"switch-basic\" />\n        <FieldLabel htmlFor=\"switch-basic\">Airplane Mode</FieldLabel>\n      </Field>\n    </Example>\n  )\n}\n\nfunction SwitchWithLabel() {\n  return (\n    <Example title=\"With Label\">\n      <div className=\"flex items-center gap-2\">\n        <Switch id=\"switch-bluetooth\" defaultChecked />\n        <Label htmlFor=\"switch-bluetooth\">Bluetooth</Label>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchWithDescription() {\n  return (\n    <Example title=\"With Description\">\n      <FieldLabel htmlFor=\"switch-focus-mode\">\n        <Field orientation=\"horizontal\">\n          <FieldContent>\n            <FieldTitle>Share across devices</FieldTitle>\n            <FieldDescription>\n              Focus is shared across devices, and turns off when you leave the\n              app.\n            </FieldDescription>\n          </FieldContent>\n          <Switch id=\"switch-focus-mode\" />\n        </Field>\n      </FieldLabel>\n    </Example>\n  )\n}\n\nfunction SwitchDisabled() {\n  return (\n    <Example title=\"Disabled\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-unchecked\" disabled />\n          <Label htmlFor=\"switch-disabled-unchecked\">\n            Disabled (Unchecked)\n          </Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-disabled-checked\" defaultChecked disabled />\n          <Label htmlFor=\"switch-disabled-checked\">Disabled (Checked)</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n\nfunction SwitchSizes() {\n  return (\n    <Example title=\"Sizes\">\n      <div className=\"flex flex-col gap-12\">\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-sm\" size=\"sm\" />\n          <Label htmlFor=\"switch-size-sm\">Small</Label>\n        </div>\n        <div className=\"flex items-center gap-2\">\n          <Switch id=\"switch-size-default\" size=\"default\" />\n          <Label htmlFor=\"switch-size-default\">Default</Label>\n        </div>\n      </div>\n    </Example>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx b/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx
index 0bbf6fa76d..0bb3551198 100644
--- a/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx
+++ b/apps/v4/registry/bases/base/examples/dropdown-menu-example.tsx
@@ -610,7 +610,7 @@ function DropdownMenuWithAvatar() {
             render={
               <Button
                 variant="outline"
-                className="h-12 justify-start px-2 md:max-w-[200px]"
+                className="h-12 justify-start px-2 md:max-w-[200px] style-sera:font-normal style-sera:tracking-normal style-sera:normal-case"
               />
             }
           >
diff --git a/apps/v4/registry/bases/base/examples/field-example.tsx b/apps/v4/registry/bases/base/examples/field-example.tsx
index 627a6eb9a9..71db484721 100644
--- a/apps/v4/registry/bases/base/examples/field-example.tsx
+++ b/apps/v4/registry/bases/base/examples/field-example.tsx
@@ -438,7 +438,7 @@ function CheckboxFields() {
       <FieldGroup>
         <Field orientation="horizontal">
           <Checkbox id="checkbox-basic" defaultChecked />
-          <FieldLabel htmlFor="checkbox-basic" className="font-normal">
+          <FieldLabel htmlFor="checkbox-basic">
             I agree to the terms and conditions
           </FieldLabel>
         </Field>
@@ -478,19 +478,15 @@ function CheckboxFields() {
           <FieldGroup className="gap-3">
             <Field orientation="horizontal">
               <Checkbox id="pref-dark" />
-              <FieldLabel htmlFor="pref-dark" className="font-normal">
-                Dark mode
-              </FieldLabel>
+              <FieldLabel htmlFor="pref-dark">Dark mode</FieldLabel>
             </Field>
             <Field orientation="horizontal">
               <Checkbox id="pref-compact" />
-              <FieldLabel htmlFor="pref-compact" className="font-normal">
-                Compact view
-              </FieldLabel>
+              <FieldLabel htmlFor="pref-compact">Compact view</FieldLabel>
             </Field>
             <Field orientation="horizontal">
               <Checkbox id="pref-notifications" />
-              <FieldLabel htmlFor="pref-notifications" className="font-normal">
+              <FieldLabel htmlFor="pref-notifications">
                 Enable notifications
               </FieldLabel>
             </Field>
@@ -498,13 +494,11 @@ function CheckboxFields() {
         </FieldSet>
         <Field data-invalid orientation="horizontal">
           <Checkbox id="checkbox-invalid" aria-invalid />
-          <FieldLabel htmlFor="checkbox-invalid" className="font-normal">
-            Invalid checkbox
-          </FieldLabel>
+          <FieldLabel htmlFor="checkbox-invalid">Invalid checkbox</FieldLabel>
         </Field>
         <Field data-disabled orientation="horizontal">
           <Checkbox id="checkbox-disabled-field" disabled />
-          <FieldLabel htmlFor="checkbox-disabled-field" className="font-normal">
+          <FieldLabel htmlFor="checkbox-disabled-field">
             Disabled checkbox
           </FieldLabel>
         </Field>
@@ -522,21 +516,15 @@ function RadioFields() {
           <RadioGroup defaultValue="free">
             <Field orientation="horizontal">
               <RadioGroupItem value="free" id="radio-free" />
-              <FieldLabel htmlFor="radio-free" className="font-normal">
-                Free Plan
-              </FieldLabel>
+              <FieldLabel htmlFor="radio-free">Free Plan</FieldLabel>
             </Field>
             <Field orientation="horizontal">
               <RadioGroupItem value="pro" id="radio-pro" />
-              <FieldLabel htmlFor="radio-pro" className="font-normal">
-                Pro Plan
-              </FieldLabel>
+              <FieldLabel htmlFor="radio-pro">Pro Plan</FieldLabel>
             </Field>
             <Field orientation="horizontal">
               <RadioGroupItem value="enterprise" id="radio-enterprise" />
-              <FieldLabel htmlFor="radio-enterprise" className="font-normal">
-                Enterprise
-              </FieldLabel>
+              <FieldLabel htmlFor="radio-enterprise">Enterprise</FieldLabel>
             </Field>
           </RadioGroup>
         </FieldSet>
@@ -570,18 +558,6 @@ function RadioFields() {
               </FieldDescription>
             </FieldContent>
           </Field>
-          <Field orientation="horizontal">
-            <RadioGroupItem value="option2" id="radio-content-2" />
-            <FieldContent>
-              <FieldLabel htmlFor="radio-content-2">
-                Enable Touch ID and Face ID to make it even faster to unlock
-                your device. This is a long label to test the layout.
-              </FieldLabel>
-              <FieldDescription>
-                Enable Touch ID to quickly unlock your device.
-              </FieldDescription>
-            </FieldContent>
-          </Field>
         </RadioGroup>
         <RadioGroup className="gap-3">
           <FieldLabel htmlFor="radio-title-1">
@@ -595,20 +571,6 @@ function RadioFields() {
               </FieldContent>
             </Field>
           </FieldLabel>
-          <FieldLabel htmlFor="radio-title-2">
-            <Field orientation="horizontal">
-              <RadioGroupItem value="title2" id="radio-title-2" />
-              <FieldContent>
-                <FieldTitle>
-                  Enable Touch ID and Face ID to make it even faster to unlock
-                  your device. This is a long label to test the layout.
-                </FieldTitle>
-                <FieldDescription>
-                  Enable Touch ID to quickly unlock your device.
-                </FieldDescription>
-              </FieldContent>
-            </Field>
-          </FieldLabel>
         </RadioGroup>
         <FieldSet>
           <FieldLegend variant="label">Invalid Radio Group</FieldLegend>
@@ -696,19 +658,15 @@ function SwitchFields() {
           <FieldDescription>Manage your privacy preferences.</FieldDescription>
           <Field orientation="horizontal">
             <Switch id="switch-profile" defaultChecked />
-            <FieldContent>
-              <FieldLabel htmlFor="switch-profile" className="font-normal">
-                Make profile visible to others
-              </FieldLabel>
-            </FieldContent>
+            <FieldLabel htmlFor="switch-profile">
+              Make profile visible to others
+            </FieldLabel>
           </Field>
           <Field orientation="horizontal">
             <Switch id="switch-email" />
-            <FieldContent>
-              <FieldLabel htmlFor="switch-email" className="font-normal">
-                Show email on profile
-              </FieldLabel>
-            </FieldContent>
+            <FieldLabel htmlFor="switch-email">
+              Show email on profile
+            </FieldLabel>
           </Field>
         </Field>
         <Field data-invalid orientation="horizontal">
diff --git a/apps/v4/registry/bases/base/examples/select-example.tsx b/apps/v4/registry/bases/base/examples/select-example.tsx
index 23c4011b1b..efb5741f2e 100644
--- a/apps/v4/registry/bases/base/examples/select-example.tsx
+++ b/apps/v4/registry/bases/base/examples/select-example.tsx
@@ -630,9 +630,9 @@ function SelectPlan() {
 function SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {
   return (
     <Item size="xs" className="w-full p-0">
-      <ItemContent className="gap-0">
-        <ItemTitle>{plan.name}</ItemTitle>
-        <ItemDescription className="text-xs">
+      <ItemContent className="gap-0 normal-case">
+        <ItemTitle className="font-sans">{plan.name}</ItemTitle>
+        <ItemDescription className="text-xs font-normal tracking-normal">
           {plan.description}
         </ItemDescription>
       </ItemContent>
diff --git a/apps/v4/registry/bases/base/examples/switch-example.tsx b/apps/v4/registry/bases/base/examples/switch-example.tsx
index 91058833bd..a4b68630a6 100644
--- a/apps/v4/registry/bases/base/examples/switch-example.tsx
+++ b/apps/v4/registry/bases/base/examples/switch-example.tsx
@@ -17,6 +17,7 @@ export default function SwitchExample() {
     <ExampleWrapper>
       <SwitchBasic />
       <SwitchWithDescription />
+      <SwitchWithLabel />
       <SwitchDisabled />
       <SwitchSizes />
     </ExampleWrapper>
diff --git a/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx b/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx
index 62e47d1b6c..14bbadaf3f 100644
--- a/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/dropdown-menu-example.tsx
@@ -173,7 +173,7 @@ function DropdownMenuWithShortcuts() {
               <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
             </DropdownMenuItem>
             <DropdownMenuItem>
-              Keyboard shortcuts
+              Shortcuts
               <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
             </DropdownMenuItem>
           </DropdownMenuGroup>
diff --git a/apps/v4/registry/bases/radix/examples/field-example.tsx b/apps/v4/registry/bases/radix/examples/field-example.tsx
index 60453e9e8c..f4168b7190 100644
--- a/apps/v4/registry/bases/radix/examples/field-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/field-example.tsx
@@ -397,7 +397,7 @@ function CheckboxFields() {
       <FieldGroup>
         <Field orientation="horizontal">
           <Checkbox id="checkbox-basic" defaultChecked />
-          <FieldLabel htmlFor="checkbox-basic" className="font-normal">
+          <FieldLabel htmlFor="checkbox-basic">
             I agree to the terms and conditions
           </FieldLabel>
         </Field>
@@ -437,19 +437,15 @@ function CheckboxFields() {
           <FieldGroup className="gap-3">
             <Field orientation="horizontal">
               <Checkbox id="pref-dark" />
-              <FieldLabel htmlFor="pref-dark" className="font-normal">
-                Dark mode
-              </FieldLabel>
+              <FieldLabel htmlFor="pref-dark">Dark mode</FieldLabel>
             </Field>
             <Field orientation="horizontal">
               <Checkbox id="pref-compact" />
-              <FieldLabel htmlFor="pref-compact" className="font-normal">
-                Compact view
-              </FieldLabel>
+              <FieldLabel htmlFor="pref-compact">Compact view</FieldLabel>
             </Field>
             <Field orientation="horizontal">
               <Checkbox id="pref-notifications" />
-              <FieldLabel htmlFor="pref-notifications" className="font-normal">
+              <FieldLabel htmlFor="pref-notifications">
                 Enable notifications
               </FieldLabel>
             </Field>
@@ -457,13 +453,11 @@ function CheckboxFields() {
         </FieldSet>
         <Field data-invalid orientation="horizontal">
           <Checkbox id="checkbox-invalid" aria-invalid />
-          <FieldLabel htmlFor="checkbox-invalid" className="font-normal">
-            Invalid checkbox
-          </FieldLabel>
+          <FieldLabel htmlFor="checkbox-invalid">Invalid checkbox</FieldLabel>
         </Field>
         <Field data-disabled orientation="horizontal">
           <Checkbox id="checkbox-disabled-field" disabled />
-          <FieldLabel htmlFor="checkbox-disabled-field" className="font-normal">
+          <FieldLabel htmlFor="checkbox-disabled-field">
             Disabled checkbox
           </FieldLabel>
         </Field>
@@ -481,21 +475,15 @@ function RadioFields() {
           <RadioGroup defaultValue="free">
             <Field orientation="horizontal">
               <RadioGroupItem value="free" id="radio-free" />
-              <FieldLabel htmlFor="radio-free" className="font-normal">
-                Free Plan
-              </FieldLabel>
+              <FieldLabel htmlFor="radio-free">Free Plan</FieldLabel>
             </Field>
             <Field orientation="horizontal">
               <RadioGroupItem value="pro" id="radio-pro" />
-              <FieldLabel htmlFor="radio-pro" className="font-normal">
-                Pro Plan
-              </FieldLabel>
+              <FieldLabel htmlFor="radio-pro">Pro Plan</FieldLabel>
             </Field>
             <Field orientation="horizontal">
               <RadioGroupItem value="enterprise" id="radio-enterprise" />
-              <FieldLabel htmlFor="radio-enterprise" className="font-normal">
-                Enterprise
-              </FieldLabel>
+              <FieldLabel htmlFor="radio-enterprise">Enterprise</FieldLabel>
             </Field>
           </RadioGroup>
         </FieldSet>
@@ -529,18 +517,6 @@ function RadioFields() {
               </FieldDescription>
             </FieldContent>
           </Field>
-          <Field orientation="horizontal">
-            <RadioGroupItem value="option2" id="radio-content-2" />
-            <FieldContent>
-              <FieldLabel htmlFor="radio-content-2">
-                Enable Touch ID and Face ID to make it even faster to unlock
-                your device. This is a long label to test the layout.
-              </FieldLabel>
-              <FieldDescription>
-                Enable Touch ID to quickly unlock your device.
-              </FieldDescription>
-            </FieldContent>
-          </Field>
         </RadioGroup>
         <RadioGroup className="gap-3">
           <FieldLabel htmlFor="radio-title-1">
@@ -554,20 +530,6 @@ function RadioFields() {
               </FieldContent>
             </Field>
           </FieldLabel>
-          <FieldLabel htmlFor="radio-title-2">
-            <Field orientation="horizontal">
-              <RadioGroupItem value="title2" id="radio-title-2" />
-              <FieldContent>
-                <FieldTitle>
-                  Enable Touch ID and Face ID to make it even faster to unlock
-                  your device. This is a long label to test the layout.
-                </FieldTitle>
-                <FieldDescription>
-                  Enable Touch ID to quickly unlock your device.
-                </FieldDescription>
-              </FieldContent>
-            </Field>
-          </FieldLabel>
         </RadioGroup>
         <FieldSet>
           <FieldLegend variant="label">Invalid Radio Group</FieldLegend>
@@ -655,19 +617,15 @@ function SwitchFields() {
           <FieldDescription>Manage your privacy preferences.</FieldDescription>
           <Field orientation="horizontal">
             <Switch id="switch-profile" defaultChecked />
-            <FieldContent>
-              <FieldLabel htmlFor="switch-profile" className="font-normal">
-                Make profile visible to others
-              </FieldLabel>
-            </FieldContent>
+            <FieldLabel htmlFor="switch-profile">
+              Make profile visible to others
+            </FieldLabel>
           </Field>
           <Field orientation="horizontal">
             <Switch id="switch-email" />
-            <FieldContent>
-              <FieldLabel htmlFor="switch-email" className="font-normal">
-                Show email on profile
-              </FieldLabel>
-            </FieldContent>
+            <FieldLabel htmlFor="switch-email">
+              Show email on profile
+            </FieldLabel>
           </Field>
         </Field>
         <Field data-invalid orientation="horizontal">
diff --git a/apps/v4/registry/bases/radix/examples/select-example.tsx b/apps/v4/registry/bases/radix/examples/select-example.tsx
index c986425703..9ec785cda0 100644
--- a/apps/v4/registry/bases/radix/examples/select-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/select-example.tsx
@@ -509,9 +509,9 @@ function SelectPlan() {
 function SelectPlanItem({ plan }: { plan: (typeof plans)[number] }) {
   return (
     <Item size="xs" className="w-full p-0">
-      <ItemContent className="gap-0">
-        <ItemTitle>{plan.name}</ItemTitle>
-        <ItemDescription className="text-xs">
+      <ItemContent className="gap-0 normal-case">
+        <ItemTitle className="font-sans">{plan.name}</ItemTitle>
+        <ItemDescription className="text-xs font-normal tracking-normal">
           {plan.description}
         </ItemDescription>
       </ItemContent>
diff --git a/apps/v4/registry/bases/radix/examples/switch-example.tsx b/apps/v4/registry/bases/radix/examples/switch-example.tsx
index d0143f4ee0..78f865ac38 100644
--- a/apps/v4/registry/bases/radix/examples/switch-example.tsx
+++ b/apps/v4/registry/bases/radix/examples/switch-example.tsx
@@ -17,6 +17,7 @@ export default function SwitchExample() {
     <ExampleWrapper>
       <SwitchBasic />
       <SwitchWithDescription />
+      <SwitchWithLabel />
       <SwitchDisabled />
       <SwitchSizes />
     </ExampleWrapper>
diff --git a/apps/v4/registry/styles/style-sera.css b/apps/v4/registry/styles/style-sera.css
index f42162beb6..ebf900fb18 100644
--- a/apps/v4/registry/styles/style-sera.css
+++ b/apps/v4/registry/styles/style-sera.css
@@ -5,7 +5,7 @@
   }
 
   .cn-accordion-trigger {
-    @apply focus-visible:ring-ring/30 focus-visible:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-none gap-6 py-4 text-left text-sm font-semibold hover:underline focus-visible:ring-2 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4;
+    @apply focus-visible:ring-ring/30 focus-visible:border-ring **:data-[slot=accordion-trigger-icon]:text-muted-foreground rounded-none gap-6 py-4 text-left text-sm font-semibold hover:underline focus-visible:ring-2 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-3.5;
   }
 
   .cn-accordion-content {
@@ -118,7 +118,7 @@
 
   /* MARK: Breadcrumb */
   .cn-breadcrumb-list {
-    @apply text-muted-foreground gap-1.5 text-sm sm:gap-2.5;
+    @apply text-muted-foreground gap-1.5 text-xs uppercase tracking-wide sm:gap-2.5;
   }
 
   .cn-breadcrumb-item {
@@ -143,7 +143,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-none border border-transparent bg-clip-padding text-xs font-semibold uppercase tracking-widest focus-visible:ring-2 aria-invalid:ring-2 active:not-aria-[haspopup]:translate-y-px [&_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-none border border-transparent bg-clip-padding text-xs font-semibold uppercase tracking-widest focus-visible:ring-2 aria-invalid:ring-2 active:not-aria-[haspopup]:translate-y-px [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-button-variant-default {
@@ -216,7 +216,7 @@
   }
 
   .cn-button-group-text {
-    @apply gap-2 border border-transparent border-b-input bg-transparent px-2.5 text-xs font-semibold [&_svg:not([class*='size-'])]:size-4 group-has-[>[data-variant=outline]]/button-group:border-border uppercase;
+    @apply gap-2 border border-transparent border-b-input bg-transparent px-2.5 text-xs font-semibold [&_svg:not([class*='size-'])]:size-3.5 group-has-[>[data-variant=outline]]/button-group:border-border uppercase;
   }
 
   .cn-button-group-separator {
@@ -285,11 +285,11 @@
   }
 
   .cn-combobox-label {
-    @apply px-3 py-2 text-[0.625rem] uppercase tracking-wider font-semibold text-foreground;
+    @apply px-3 py-2 text-[0.625rem] uppercase tracking-wider text-muted-foreground;
   }
 
   .cn-combobox-item {
-    @apply data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium uppercase tracking-wider [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-combobox-item-indicator {
@@ -313,11 +313,11 @@
   }
 
   .cn-combobox-trigger {
-    @apply [&_svg:not([class*='size-'])]:size-4;
+    @apply [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-combobox-trigger-icon {
-    @apply text-muted-foreground size-4;
+    @apply text-muted-foreground size-3.5;
   }
 
   .cn-combobox-chips {
@@ -350,7 +350,7 @@
   }
 
   .cn-command-input-icon {
-    @apply size-4 shrink-0 opacity-50;
+    @apply size-3.5 shrink-0 opacity-50;
   }
 
   .cn-command-input {
@@ -374,7 +374,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-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-none [&_svg:not([class*='size-'])]:size-4;
+    @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-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-none [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-command-shortcut {
@@ -391,15 +391,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-none px-3 py-2 text-sm data-inset:pl-9.5 [&_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-none px-3 py-2 text-xs font-medium uppercase tracking-wider data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-context-menu-checkbox-item {
-    @apply focus:bg-accent focus:text-accent-foreground gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium uppercase tracking-wider data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-context-menu-radio-item {
-    @apply focus:bg-accent focus:text-accent-foreground gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium uppercase tracking-wider data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-context-menu-item-indicator {
@@ -419,7 +419,7 @@
   }
 
   .cn-context-menu-sub-trigger {
-    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-none px-3 py-2 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground rounded-none px-3 py-2 text-xs font-medium uppercase tracking-wider data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-context-menu-sub-content {
@@ -498,15 +498,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-none px-3 py-2 text-sm data-inset:pl-9.5 [&_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-none px-3 py-2 text-xs font-medium uppercase tracking-wider data-inset:pl-9.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 gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium uppercase tracking-wider data-inset:pl-9.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 gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium uppercase tracking-wider data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-dropdown-menu-item-indicator {
@@ -526,7 +526,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-3 py-2 text-sm data-inset:pl-9.5 [&_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-3 py-2 text-xs font-medium uppercase tracking-wider data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-dropdown-menu-sub-content {
@@ -596,7 +596,7 @@
   }
 
   .cn-field-title {
-    @apply gap-2 group-data-[disabled=true]/field:opacity-50 leading-relaxed font-semibold text-xs uppercase tracking-wide;
+    @apply gap-2 group-data-[disabled=true]/field:opacity-50 leading-normal font-medium;
   }
 
   .cn-field-description {
@@ -647,7 +647,7 @@
   }
 
   .cn-input-otp-separator {
-    @apply [&_svg:not([class*='size-'])]:size-4;
+    @apply [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   /* MARK: Item */
@@ -738,7 +738,7 @@
 
   /* MARK: Label */
   .cn-label {
-    @apply gap-2 text-xs leading-relaxed font-semibold uppercase tracking-wide group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 peer-data-[slot=checkbox]:font-medium peer-data-[slot=checkbox]:normal-case peer-data-[slot=radio]:font-medium peer-data-[slot=radio]:normal-case peer-data-[slot=checkbox]:text-sm peer-data-[slot=radio]:text-sm peer-data-[slot=checkbox]:tracking-normal peer-data-[slot=radio]:tracking-normal;
+    @apply gap-2 text-sm leading-relaxed font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 peer-data-[slot=checkbox]:font-normal peer-data-[slot=radio-group-item]:font-normal peer-data-[slot=switch]:font-normal;
   }
 
   /* MARK: Menubar */
@@ -759,11 +759,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.5 rounded-none px-3 py-2 text-sm data-disabled:opacity-50 data-inset:pl-9.5 [&_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-none px-3 py-2 text-sm data-disabled:opacity-50 data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-menubar-checkbox-item {
-    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-sm data-inset:pl-9.5;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-xs font-medium uppercase tracking-wider data-inset:pl-9.5;
   }
 
   .cn-menubar-checkbox-item-indicator {
@@ -771,7 +771,7 @@
   }
 
   .cn-menubar-radio-item {
-    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-sm data-disabled:opacity-50 data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-4;
+    @apply focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-xs font-medium uppercase tracking-wider data-disabled:opacity-50 data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-menubar-radio-item-indicator {
@@ -791,7 +791,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-3 py-2 text-sm data-inset:pl-9.5 [&_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-3 py-2 text-xs font-medium uppercase tracking-wider data-inset:pl-9.5 [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-menubar-sub-content {
@@ -812,7 +812,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-none p-3 text-sm transition-all outline-none focus-visible:ring-2 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4 in-data-[slot=navigation-menu-content]:rounded-none;
+    @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-none p-3 text-sm transition-all outline-none focus-visible:ring-2 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-3.5 in-data-[slot=navigation-menu-content]:rounded-none;
   }
 
   .cn-navigation-menu-trigger-icon {
@@ -849,7 +849,7 @@
   }
 
   .cn-native-select-icon {
-    @apply text-muted-foreground top-1/2 right-0 size-4 -translate-y-1/2;
+    @apply text-muted-foreground top-1/2 right-0 size-3.5 -translate-y-1/2;
   }
 
   /* MARK: Pagination */
@@ -944,7 +944,7 @@
 
   /* MARK: Select */
   .cn-select-trigger {
-    @apply border-transparent border-b-input bg-transparent data-placeholder:text-muted-foreground focus-visible:border-b-ring aria-invalid:border-b-destructive dark:aria-invalid:border-b-destructive/50 gap-1.5 rounded-none border py-2 px-0 text-sm transition-[color,border-color] data-[size=default]:h-10 data-[size=sm]:h-9 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4;
+    @apply border-transparent border-b-input bg-transparent data-placeholder:text-muted-foreground focus-visible:border-b-ring aria-invalid:border-b-destructive dark:aria-invalid:border-b-destructive/50 gap-1.5 rounded-none border py-2 px-0 text-sm transition-[color,border-color] data-[size=default]:h-10 data-[size=sm]:h-9 *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-select-value {
@@ -952,7 +952,7 @@
   }
 
   .cn-select-trigger-icon {
-    @apply text-muted-foreground size-4;
+    @apply text-muted-foreground size-3.5;
   }
 
   .cn-select-content {
@@ -964,11 +964,11 @@
   }
 
   .cn-select-label {
-    @apply px-3 py-2 text-[0.625rem] uppercase tracking-wider font-semibold text-foreground;
+    @apply px-3 py-2 text-[0.625rem] uppercase tracking-wider text-muted-foreground;
   }
 
   .cn-select-item {
-    @apply focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-none 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;
+    @apply focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium uppercase tracking-wider [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2;
   }
 
   .cn-select-item-indicator {
@@ -988,11 +988,11 @@
   }
 
   .cn-select-scroll-up-button {
-    @apply bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4;
+    @apply bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-select-scroll-down-button {
-    @apply bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4;
+    @apply bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   /* MARK: Separator */
@@ -1087,11 +1087,11 @@
   }
 
   .cn-sidebar-group-label {
-    @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-none px-3 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4;
+    @apply text-sidebar-foreground/70 ring-sidebar-ring h-8 rounded-none px-3 text-xs font-medium transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-3.5;
   }
 
   .cn-sidebar-group-action {
-    @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-none p-0 focus-visible:ring-2 [&>svg]:size-4;
+    @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 w-5 rounded-none p-0 focus-visible:ring-2 [&>svg]:size-3.5;
   }
 
   .cn-sidebar-menu-button {
@@ -1119,7 +1119,7 @@
   }
 
   .cn-sidebar-menu-action {
-    @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-none p-0 peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-4;
+    @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 aspect-square w-5 rounded-none p-0 peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 focus-visible:ring-2 [&>svg]:size-3.5;
   }
 
   .cn-sidebar-menu-badge {
@@ -1131,7 +1131,7 @@
   }
 
   .cn-sidebar-menu-skeleton-icon {
-    @apply size-4 rounded-none;
+    @apply size-3.5 rounded-none;
   }
 
   .cn-sidebar-menu-skeleton-text {
@@ -1143,7 +1143,7 @@
   }
 
   .cn-sidebar-menu-sub-button {
-    @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-3 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-4;
+    @apply text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground h-7 gap-2 rounded-none px-3 focus-visible:ring-2 data-[size=md]:text-sm data-[size=sm]:text-xs [&>svg]:size-3.5;
   }
 
   /* MARK: Skeleton */
@@ -1229,7 +1229,7 @@
   }
 
   .cn-tabs-trigger {
-    @apply gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold group-data-vertical/tabs:px-4 group-data-vertical/tabs:py-2 [&_svg:not([class*='size-'])]:size-4 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 uppercase tracking-wider;
+    @apply gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold group-data-vertical/tabs:px-4 group-data-vertical/tabs:py-2 [&_svg:not([class*='size-'])]:size-3.5 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 uppercase tracking-wider;
   }
 
   .cn-tabs-content {
@@ -1243,7 +1243,7 @@
 
   /* MARK: Toggle */
   .cn-toggle {
-    @apply hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1.5 rounded-none text-xs font-semibold uppercase tracking-widest transition-colors [&_svg:not([class*='size-'])]:size-4;
+    @apply hover:text-foreground aria-pressed:bg-muted focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive gap-1.5 rounded-none text-xs font-semibold uppercase tracking-widest transition-colors [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-toggle-variant-default {
@@ -1298,7 +1298,7 @@
   }
 
   .cn-input-group-addon {
-    @apply 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-none **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4;
+    @apply 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-none **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-3.5;
   }
 
   /* .cn-input-group-addon-align-inline-start {
@@ -1334,7 +1334,7 @@
   }
 
   .cn-input-group-text {
-    @apply text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-4;
+    @apply text-muted-foreground gap-2 text-sm [&_svg:not([class*='size-'])]:size-3.5;
   }
 
   .cn-input-group-input {
diff --git a/apps/v4/styles/base-sera/ui/accordion.tsx b/apps/v4/styles/base-sera/ui/accordion.tsx
index 3f612ba3f7..8ced1d37e0 100644
--- a/apps/v4/styles/base-sera/ui/accordion.tsx
+++ b/apps/v4/styles/base-sera/ui/accordion.tsx
@@ -33,7 +33,7 @@ function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 rounded-none border border-transparent py-4 text-left text-sm font-semibold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          "group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 rounded-none border border-transparent py-4 text-left text-sm font-semibold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-3.5 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
           className
         )}
         {...props}
diff --git a/apps/v4/styles/base-sera/ui/breadcrumb.tsx b/apps/v4/styles/base-sera/ui/breadcrumb.tsx
index 9728025a05..1ea13e00f3 100644
--- a/apps/v4/styles/base-sera/ui/breadcrumb.tsx
+++ b/apps/v4/styles/base-sera/ui/breadcrumb.tsx
@@ -21,7 +21,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
     <ol
       data-slot="breadcrumb-list"
       className={cn(
-        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5",
+        "flex flex-wrap items-center gap-1.5 text-xs tracking-wide wrap-break-word text-muted-foreground uppercase sm:gap-2.5",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/base-sera/ui/button-group.tsx b/apps/v4/styles/base-sera/ui/button-group.tsx
index b73ccd2cfb..776ae92751 100644
--- a/apps/v4/styles/base-sera/ui/button-group.tsx
+++ b/apps/v4/styles/base-sera/ui/button-group.tsx
@@ -48,7 +48,7 @@ function ButtonGroupText({
     props: mergeProps<"div">(
       {
         className: cn(
-          "flex items-center gap-2 border border-transparent border-b-input bg-transparent px-2.5 text-xs font-semibold uppercase group-has-[>[data-variant=outline]]/button-group:border-border [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+          "flex items-center gap-2 border border-transparent border-b-input bg-transparent px-2.5 text-xs font-semibold uppercase group-has-[>[data-variant=outline]]/button-group:border-border [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5",
           className
         ),
       },
diff --git a/apps/v4/styles/base-sera/ui/button.tsx b/apps/v4/styles/base-sera/ui/button.tsx
index 8c2a9fd852..a99ff0b805 100644
--- a/apps/v4/styles/base-sera/ui/button.tsx
+++ b/apps/v4/styles/base-sera/ui/button.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
   {
     variants: {
       variant: {
diff --git a/apps/v4/styles/base-sera/ui/combobox.tsx b/apps/v4/styles/base-sera/ui/combobox.tsx
index 871b97140a..2fca21a854 100644
--- a/apps/v4/styles/base-sera/ui/combobox.tsx
+++ b/apps/v4/styles/base-sera/ui/combobox.tsx
@@ -27,11 +27,11 @@ function ComboboxTrigger({
   return (
     <ComboboxPrimitive.Trigger
       data-slot="combobox-trigger"
-      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      className={cn("[&_svg:not([class*='size-'])]:size-3.5", className)}
       {...props}
     >
       {children}
-      <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+      <ChevronDownIcon className="pointer-events-none size-3.5 text-muted-foreground" />
     </ComboboxPrimitive.Trigger>
   )
 }
@@ -143,7 +143,7 @@ function ComboboxItem({
     <ComboboxPrimitive.Item
       data-slot="combobox-item"
       className={cn(
-        "relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium tracking-wider uppercase outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
@@ -178,7 +178,7 @@ function ComboboxLabel({
     <ComboboxPrimitive.GroupLabel
       data-slot="combobox-label"
       className={cn(
-        "px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase",
+        "px-3 py-2 text-[0.625rem] tracking-wider text-muted-foreground uppercase",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/base-sera/ui/command.tsx b/apps/v4/styles/base-sera/ui/command.tsx
index 190aca06cf..9d5f0b1496 100644
--- a/apps/v4/styles/base-sera/ui/command.tsx
+++ b/apps/v4/styles/base-sera/ui/command.tsx
@@ -76,7 +76,7 @@ function CommandInput({
           {...props}
         />
         <InputGroupAddon>
-          <SearchIcon className="size-4 shrink-0 opacity-50" />
+          <SearchIcon className="size-3.5 shrink-0 opacity-50" />
         </InputGroupAddon>
       </InputGroup>
     </div>
@@ -150,7 +150,7 @@ function CommandItem({
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "group/command-item relative flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 data-selected:*:[svg]:text-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/base-sera/ui/context-menu.tsx b/apps/v4/styles/base-sera/ui/context-menu.tsx
index a9fe27a5df..bbf62da2e7 100644
--- a/apps/v4/styles/base-sera/ui/context-menu.tsx
+++ b/apps/v4/styles/base-sera/ui/context-menu.tsx
@@ -104,7 +104,7 @@ function ContextMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "group/context-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
+        "group/context-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
         className
       )}
       {...props}
@@ -131,7 +131,7 @@ function ContextMenuSubTrigger({
       data-slot="context-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "flex cursor-default items-center rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center rounded-none px-3 py-2 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
@@ -169,7 +169,7 @@ function ContextMenuCheckboxItem({
       data-slot="context-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       checked={checked}
@@ -209,7 +209,7 @@ function ContextMenuRadioItem({
       data-slot="context-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/base-sera/ui/dropdown-menu.tsx b/apps/v4/styles/base-sera/ui/dropdown-menu.tsx
index 71964f9ca9..2cf57405b3 100644
--- a/apps/v4/styles/base-sera/ui/dropdown-menu.tsx
+++ b/apps/v4/styles/base-sera/ui/dropdown-menu.tsx
@@ -91,7 +91,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 data-[variant=destructive]:*:[svg]:text-destructive",
         className
       )}
       {...props}
@@ -116,7 +116,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
@@ -165,7 +165,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       checked={checked}
@@ -206,7 +206,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/base-sera/ui/field.tsx b/apps/v4/styles/base-sera/ui/field.tsx
index e7998c1b51..47d515dd6e 100644
--- a/apps/v4/styles/base-sera/ui/field.tsx
+++ b/apps/v4/styles/base-sera/ui/field.tsx
@@ -120,7 +120,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-label"
       className={cn(
-        "flex w-fit items-center gap-2 text-xs font-semibold tracking-wide uppercase group-data-[disabled=true]/field:opacity-50",
+        "flex w-fit items-center gap-2 leading-normal font-medium group-data-[disabled=true]/field:opacity-50",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/base-sera/ui/input-group.tsx b/apps/v4/styles/base-sera/ui/input-group.tsx
index 6bf19daacf..71932f0158 100644
--- a/apps/v4/styles/base-sera/ui/input-group.tsx
+++ b/apps/v4/styles/base-sera/ui/input-group.tsx
@@ -23,7 +23,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 const inputGroupAddonVariants = cva(
-  "flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-none **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4",
+  "flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-none **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
   {
     variants: {
       align: {
@@ -105,7 +105,7 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       className={cn(
-        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/base-sera/ui/input-otp.tsx b/apps/v4/styles/base-sera/ui/input-otp.tsx
index 61d61ef29f..2fd05a663b 100644
--- a/apps/v4/styles/base-sera/ui/input-otp.tsx
+++ b/apps/v4/styles/base-sera/ui/input-otp.tsx
@@ -74,7 +74,7 @@ function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="input-otp-separator"
-      className="flex items-center [&_svg:not([class*='size-'])]:size-4"
+      className="flex items-center [&_svg:not([class*='size-'])]:size-3.5"
       role="separator"
       {...props}
     >
diff --git a/apps/v4/styles/base-sera/ui/label.tsx b/apps/v4/styles/base-sera/ui/label.tsx
index 8b8754961e..3268a537c4 100644
--- a/apps/v4/styles/base-sera/ui/label.tsx
+++ b/apps/v4/styles/base-sera/ui/label.tsx
@@ -9,7 +9,7 @@ function Label({ className, ...props }: React.ComponentProps<"label">) {
     <label
       data-slot="label"
       className={cn(
-        "flex items-center gap-2 text-xs leading-relaxed font-semibold tracking-wide uppercase select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[slot=checkbox]:text-sm peer-data-[slot=checkbox]:font-medium peer-data-[slot=checkbox]:tracking-normal peer-data-[slot=checkbox]:normal-case peer-data-[slot=radio]:text-sm peer-data-[slot=radio]:font-medium peer-data-[slot=radio]:tracking-normal peer-data-[slot=radio]:normal-case",
+        "flex items-center gap-2 text-sm leading-relaxed font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[slot=checkbox]:font-normal peer-data-[slot=radio-group-item]:font-normal peer-data-[slot=switch]:font-normal",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/base-sera/ui/menubar.tsx b/apps/v4/styles/base-sera/ui/menubar.tsx
index 9c7c8bb505..29ce76dd27 100644
--- a/apps/v4/styles/base-sera/ui/menubar.tsx
+++ b/apps/v4/styles/base-sera/ui/menubar.tsx
@@ -101,7 +101,7 @@ function MenubarItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "group/menubar-item gap-2.5 rounded-none px-3 py-2 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
+        "group/menubar-item gap-2.5 rounded-none px-3 py-2 text-sm focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:opacity-50 [&_svg:not([class*='size-'])]:size-3.5 data-[variant=destructive]:*:[svg]:text-destructive!",
         className
       )}
       {...props}
@@ -123,7 +123,7 @@ function MenubarCheckboxItem({
       data-slot="menubar-checkbox-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       checked={checked}
@@ -158,7 +158,7 @@ function MenubarRadioItem({
       data-slot="menubar-radio-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
@@ -240,7 +240,7 @@ function MenubarSubTrigger({
       data-slot="menubar-sub-trigger"
       data-inset={inset}
       className={cn(
-        "gap-2 rounded-none px-3 py-2 text-sm focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
+        "gap-2 rounded-none px-3 py-2 text-xs font-medium tracking-wider uppercase focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/base-sera/ui/native-select.tsx b/apps/v4/styles/base-sera/ui/native-select.tsx
index 5747d29c0b..e182217865 100644
--- a/apps/v4/styles/base-sera/ui/native-select.tsx
+++ b/apps/v4/styles/base-sera/ui/native-select.tsx
@@ -28,7 +28,7 @@ function NativeSelect({
         {...props}
       />
       <ChevronDownIcon
-        className="pointer-events-none absolute top-1/2 right-0 size-4 -translate-y-1/2 text-muted-foreground select-none"
+        className="pointer-events-none absolute top-1/2 right-0 size-3.5 -translate-y-1/2 text-muted-foreground select-none"
         aria-hidden="true"
         data-slot="native-select-icon"
       />
diff --git a/apps/v4/styles/base-sera/ui/navigation-menu.tsx b/apps/v4/styles/base-sera/ui/navigation-menu.tsx
index e3ac4d2354..368362f85f 100644
--- a/apps/v4/styles/base-sera/ui/navigation-menu.tsx
+++ b/apps/v4/styles/base-sera/ui/navigation-menu.tsx
@@ -132,7 +132,7 @@ function NavigationMenuLink({
     <NavigationMenuPrimitive.Link
       data-slot="navigation-menu-link"
       className={cn(
-        "flex items-center gap-1.5 rounded-none p-3 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none data-[active=true]:bg-muted/50 data-[active=true]:hover:bg-muted data-[active=true]:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-1.5 rounded-none p-3 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none data-[active=true]:bg-muted/50 data-[active=true]:hover:bg-muted data-[active=true]:focus:bg-muted [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/base-sera/ui/select.tsx b/apps/v4/styles/base-sera/ui/select.tsx
index c2686beeb5..ecd451f9a1 100644
--- a/apps/v4/styles/base-sera/ui/select.tsx
+++ b/apps/v4/styles/base-sera/ui/select.tsx
@@ -41,7 +41,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-1.5 rounded-none border border-transparent border-b-input bg-transparent px-0 py-2 text-sm whitespace-nowrap transition-[color,border-color] outline-none focus-visible:border-b-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive data-placeholder:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-b-destructive/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit items-center justify-between gap-1.5 rounded-none border border-transparent border-b-input bg-transparent px-0 py-2 text-sm whitespace-nowrap transition-[color,border-color] outline-none focus-visible:border-b-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive data-placeholder:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-b-destructive/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
@@ -49,7 +49,7 @@ function SelectTrigger({
       {children}
       <SelectPrimitive.Icon
         render={
-          <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+          <ChevronDownIcon className="pointer-events-none size-3.5 text-muted-foreground" />
         }
       />
     </SelectPrimitive.Trigger>
@@ -106,7 +106,7 @@ function SelectLabel({
     <SelectPrimitive.GroupLabel
       data-slot="select-label"
       className={cn(
-        "px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase",
+        "px-3 py-2 text-[0.625rem] tracking-wider text-muted-foreground uppercase",
         className
       )}
       {...props}
@@ -123,7 +123,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )}
       {...props}
@@ -166,7 +166,7 @@ function SelectScrollUpButton({
     <SelectPrimitive.ScrollUpArrow
       data-slot="select-scroll-up-button"
       className={cn(
-        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        "top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
@@ -184,7 +184,7 @@ function SelectScrollDownButton({
     <SelectPrimitive.ScrollDownArrow
       data-slot="select-scroll-down-button"
       className={cn(
-        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        "bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/base-sera/ui/sidebar.tsx b/apps/v4/styles/base-sera/ui/sidebar.tsx
index 626fe5649d..d443c94ea4 100644
--- a/apps/v4/styles/base-sera/ui/sidebar.tsx
+++ b/apps/v4/styles/base-sera/ui/sidebar.tsx
@@ -403,7 +403,7 @@ function SidebarGroupLabel({
     props: mergeProps<"div">(
       {
         className: cn(
-          "flex h-8 shrink-0 items-center rounded-none px-3 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+          "flex h-8 shrink-0 items-center rounded-none px-3 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-3.5 [&>svg]:shrink-0",
           className
         ),
       },
@@ -427,7 +427,7 @@ function SidebarGroupAction({
     props: mergeProps<"button">(
       {
         className: cn(
-          "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+          "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-3.5 [&>svg]:shrink-0",
           className
         ),
       },
@@ -567,7 +567,7 @@ function SidebarMenuAction({
     props: mergeProps<"button">(
       {
         className: cn(
-          "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+          "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-3.5 [&>svg]:shrink-0",
           showOnHover &&
             "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
           className
@@ -621,7 +621,7 @@ function SidebarMenuSkeleton({
     >
       {showIcon && (
         <Skeleton
-          className="size-4 rounded-none"
+          className="size-3.5 rounded-none"
           data-sidebar="menu-skeleton-icon"
         />
       )}
@@ -682,7 +682,7 @@ function SidebarMenuSubButton({
     props: mergeProps<"a">(
       {
         className: cn(
-          "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-none px-3 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+          "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-none px-3 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-3.5 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
           className
         ),
       },
diff --git a/apps/v4/styles/base-sera/ui/tabs.tsx b/apps/v4/styles/base-sera/ui/tabs.tsx
index d4a859132b..f3a265bff0 100644
--- a/apps/v4/styles/base-sera/ui/tabs.tsx
+++ b/apps/v4/styles/base-sera/ui/tabs.tsx
@@ -58,7 +58,7 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-4 group-data-vertical/tabs:py-2 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-4 group-data-vertical/tabs:py-2 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
         "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
diff --git a/apps/v4/styles/base-sera/ui/toggle.tsx b/apps/v4/styles/base-sera/ui/toggle.tsx
index cdf48a89f7..be2a18f0b4 100644
--- a/apps/v4/styles/base-sera/ui/toggle.tsx
+++ b/apps/v4/styles/base-sera/ui/toggle.tsx
@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const toggleVariants = cva(
-  "group/toggle inline-flex items-center justify-center gap-1.5 rounded-none text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/toggle inline-flex items-center justify-center gap-1.5 rounded-none text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
   {
     variants: {
       variant: {
diff --git a/apps/v4/styles/radix-sera/ui/accordion.tsx b/apps/v4/styles/radix-sera/ui/accordion.tsx
index 0a9e021b08..e1176d0d6b 100644
--- a/apps/v4/styles/radix-sera/ui/accordion.tsx
+++ b/apps/v4/styles/radix-sera/ui/accordion.tsx
@@ -42,7 +42,7 @@ function AccordionTrigger({
       <AccordionPrimitive.Trigger
         data-slot="accordion-trigger"
         className={cn(
-          "group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 rounded-none border border-transparent py-4 text-left text-sm font-semibold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
+          "group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 rounded-none border border-transparent py-4 text-left text-sm font-semibold transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-3.5 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
           className
         )}
         {...props}
diff --git a/apps/v4/styles/radix-sera/ui/breadcrumb.tsx b/apps/v4/styles/radix-sera/ui/breadcrumb.tsx
index c62e27f10f..3b654cd4ab 100644
--- a/apps/v4/styles/radix-sera/ui/breadcrumb.tsx
+++ b/apps/v4/styles/radix-sera/ui/breadcrumb.tsx
@@ -20,7 +20,7 @@ function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
     <ol
       data-slot="breadcrumb-list"
       className={cn(
-        "flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground sm:gap-2.5",
+        "flex flex-wrap items-center gap-1.5 text-xs tracking-wide wrap-break-word text-muted-foreground uppercase sm:gap-2.5",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/radix-sera/ui/button-group.tsx b/apps/v4/styles/radix-sera/ui/button-group.tsx
index 2b0585dc45..ac5f4e2fde 100644
--- a/apps/v4/styles/radix-sera/ui/button-group.tsx
+++ b/apps/v4/styles/radix-sera/ui/button-group.tsx
@@ -49,7 +49,7 @@ function ButtonGroupText({
   return (
     <Comp
       className={cn(
-        "flex items-center gap-2 border border-transparent border-b-input bg-transparent px-2.5 text-xs font-semibold uppercase group-has-[>[data-variant=outline]]/button-group:border-border [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-2 border border-transparent border-b-input bg-transparent px-2.5 text-xs font-semibold uppercase group-has-[>[data-variant=outline]]/button-group:border-border [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/radix-sera/ui/button.tsx b/apps/v4/styles/radix-sera/ui/button.tsx
index 90e9800bd4..93a3e69e73 100644
--- a/apps/v4/styles/radix-sera/ui/button.tsx
+++ b/apps/v4/styles/radix-sera/ui/button.tsx
@@ -5,7 +5,7 @@ import { Slot } from "radix-ui"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
   {
     variants: {
       variant: {
diff --git a/apps/v4/styles/radix-sera/ui/combobox.tsx b/apps/v4/styles/radix-sera/ui/combobox.tsx
index 33896ec90c..15720f0966 100644
--- a/apps/v4/styles/radix-sera/ui/combobox.tsx
+++ b/apps/v4/styles/radix-sera/ui/combobox.tsx
@@ -27,11 +27,11 @@ function ComboboxTrigger({
   return (
     <ComboboxPrimitive.Trigger
       data-slot="combobox-trigger"
-      className={cn("[&_svg:not([class*='size-'])]:size-4", className)}
+      className={cn("[&_svg:not([class*='size-'])]:size-3.5", className)}
       {...props}
     >
       {children}
-      <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+      <ChevronDownIcon className="pointer-events-none size-3.5 text-muted-foreground" />
     </ComboboxPrimitive.Trigger>
   )
 }
@@ -145,7 +145,7 @@ function ComboboxItem({
     <ComboboxPrimitive.Item
       data-slot="combobox-item"
       className={cn(
-        "relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium tracking-wider uppercase outline-hidden select-none data-highlighted:bg-accent data-highlighted:text-accent-foreground not-data-[variant=destructive]:data-highlighted:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
@@ -180,7 +180,7 @@ function ComboboxLabel({
     <ComboboxPrimitive.GroupLabel
       data-slot="combobox-label"
       className={cn(
-        "px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase",
+        "px-3 py-2 text-[0.625rem] tracking-wider text-muted-foreground uppercase",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/radix-sera/ui/command.tsx b/apps/v4/styles/radix-sera/ui/command.tsx
index 256142fa8a..1f0777843d 100644
--- a/apps/v4/styles/radix-sera/ui/command.tsx
+++ b/apps/v4/styles/radix-sera/ui/command.tsx
@@ -75,7 +75,7 @@ function CommandInput({
           {...props}
         />
         <InputGroupAddon>
-          <SearchIcon className="size-4 shrink-0 opacity-50" />
+          <SearchIcon className="size-3.5 shrink-0 opacity-50" />
         </InputGroupAddon>
       </InputGroup>
     </div>
@@ -149,7 +149,7 @@ function CommandItem({
     <CommandPrimitive.Item
       data-slot="command-item"
       className={cn(
-        "group/command-item relative flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-selected:*:[svg]:text-foreground",
+        "group/command-item relative flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-hidden select-none in-data-[slot=dialog-content]:rounded-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-selected:bg-muted data-selected:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 data-selected:*:[svg]:text-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/radix-sera/ui/context-menu.tsx b/apps/v4/styles/radix-sera/ui/context-menu.tsx
index 079961a4a8..70e8c5080e 100644
--- a/apps/v4/styles/radix-sera/ui/context-menu.tsx
+++ b/apps/v4/styles/radix-sera/ui/context-menu.tsx
@@ -93,7 +93,7 @@ function ContextMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "group/context-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
+        "group/context-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive",
         className
       )}
       {...props}
@@ -114,7 +114,7 @@ function ContextMenuSubTrigger({
       data-slot="context-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "flex cursor-default items-center rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center rounded-none px-3 py-2 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
@@ -155,7 +155,7 @@ function ContextMenuCheckboxItem({
       data-slot="context-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       checked={checked}
@@ -184,7 +184,7 @@ function ContextMenuRadioItem({
       data-slot="context-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/radix-sera/ui/dropdown-menu.tsx b/apps/v4/styles/radix-sera/ui/dropdown-menu.tsx
index b8d26262a4..be42f894f0 100644
--- a/apps/v4/styles/radix-sera/ui/dropdown-menu.tsx
+++ b/apps/v4/styles/radix-sera/ui/dropdown-menu.tsx
@@ -76,7 +76,7 @@ function DropdownMenuItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive",
+        "group/dropdown-menu-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 data-[variant=destructive]:*:[svg]:text-destructive",
         className
       )}
       {...props}
@@ -98,7 +98,7 @@ function DropdownMenuCheckboxItem({
       data-slot="dropdown-menu-checkbox-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       checked={checked}
@@ -141,7 +141,7 @@ function DropdownMenuRadioItem({
       data-slot="dropdown-menu-radio-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
@@ -227,7 +227,7 @@ function DropdownMenuSubTrigger({
       data-slot="dropdown-menu-sub-trigger"
       data-inset={inset}
       className={cn(
-        "flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/radix-sera/ui/field.tsx b/apps/v4/styles/radix-sera/ui/field.tsx
index 863fcdff43..9866a80666 100644
--- a/apps/v4/styles/radix-sera/ui/field.tsx
+++ b/apps/v4/styles/radix-sera/ui/field.tsx
@@ -120,7 +120,7 @@ function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
     <div
       data-slot="field-label"
       className={cn(
-        "flex w-fit items-center gap-2 text-xs font-semibold tracking-wide uppercase group-data-[disabled=true]/field:opacity-50",
+        "flex w-fit items-center gap-2 leading-normal font-medium group-data-[disabled=true]/field:opacity-50",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/radix-sera/ui/input-group.tsx b/apps/v4/styles/radix-sera/ui/input-group.tsx
index d9da476e55..a70fd8f1f7 100644
--- a/apps/v4/styles/radix-sera/ui/input-group.tsx
+++ b/apps/v4/styles/radix-sera/ui/input-group.tsx
@@ -23,7 +23,7 @@ function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
 }
 
 const inputGroupAddonVariants = cva(
-  "flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-none **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-4",
+  "flex h-auto cursor-text items-center justify-center gap-2 py-2 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 **:data-[slot=kbd]:rounded-none **:data-[slot=kbd]:bg-muted-foreground/10 **:data-[slot=kbd]:px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
   {
     variants: {
       align: {
@@ -103,7 +103,7 @@ function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
   return (
     <span
       className={cn(
-        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/radix-sera/ui/input-otp.tsx b/apps/v4/styles/radix-sera/ui/input-otp.tsx
index 61d61ef29f..2fd05a663b 100644
--- a/apps/v4/styles/radix-sera/ui/input-otp.tsx
+++ b/apps/v4/styles/radix-sera/ui/input-otp.tsx
@@ -74,7 +74,7 @@ function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
   return (
     <div
       data-slot="input-otp-separator"
-      className="flex items-center [&_svg:not([class*='size-'])]:size-4"
+      className="flex items-center [&_svg:not([class*='size-'])]:size-3.5"
       role="separator"
       {...props}
     >
diff --git a/apps/v4/styles/radix-sera/ui/label.tsx b/apps/v4/styles/radix-sera/ui/label.tsx
index 8579e8c85b..854ae1f598 100644
--- a/apps/v4/styles/radix-sera/ui/label.tsx
+++ b/apps/v4/styles/radix-sera/ui/label.tsx
@@ -13,7 +13,7 @@ function Label({
     <LabelPrimitive.Root
       data-slot="label"
       className={cn(
-        "flex items-center gap-2 text-xs leading-relaxed font-semibold tracking-wide uppercase select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[slot=checkbox]:text-sm peer-data-[slot=checkbox]:font-medium peer-data-[slot=checkbox]:tracking-normal peer-data-[slot=checkbox]:normal-case peer-data-[slot=radio]:text-sm peer-data-[slot=radio]:font-medium peer-data-[slot=radio]:tracking-normal peer-data-[slot=radio]:normal-case",
+        "flex items-center gap-2 text-sm leading-relaxed font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[slot=checkbox]:font-normal peer-data-[slot=radio-group-item]:font-normal peer-data-[slot=switch]:font-normal",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/radix-sera/ui/menubar.tsx b/apps/v4/styles/radix-sera/ui/menubar.tsx
index f4b7ed1160..4dc9f37746 100644
--- a/apps/v4/styles/radix-sera/ui/menubar.tsx
+++ b/apps/v4/styles/radix-sera/ui/menubar.tsx
@@ -103,7 +103,7 @@ function MenubarItem({
       data-inset={inset}
       data-variant={variant}
       className={cn(
-        "group/menubar-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive!",
+        "group/menubar-item relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 data-[variant=destructive]:*:[svg]:text-destructive!",
         className
       )}
       {...props}
@@ -125,7 +125,7 @@ function MenubarCheckboxItem({
       data-slot="menubar-checkbox-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
+        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0",
         className
       )}
       checked={checked}
@@ -154,7 +154,7 @@ function MenubarRadioItem({
       data-slot="menubar-radio-item"
       data-inset={inset}
       className={cn(
-        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative flex cursor-default items-center gap-2.5 rounded-none py-2 pr-3 pl-9.5 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-9.5 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
@@ -237,7 +237,7 @@ function MenubarSubTrigger({
       data-slot="menubar-sub-trigger"
       data-inset={inset}
       className={cn(
-        "flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-sm outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
+        "flex cursor-default items-center gap-2 rounded-none px-3 py-2 text-xs font-medium tracking-wider uppercase outline-none select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-9.5 data-open:bg-accent data-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/radix-sera/ui/native-select.tsx b/apps/v4/styles/radix-sera/ui/native-select.tsx
index 5747d29c0b..e182217865 100644
--- a/apps/v4/styles/radix-sera/ui/native-select.tsx
+++ b/apps/v4/styles/radix-sera/ui/native-select.tsx
@@ -28,7 +28,7 @@ function NativeSelect({
         {...props}
       />
       <ChevronDownIcon
-        className="pointer-events-none absolute top-1/2 right-0 size-4 -translate-y-1/2 text-muted-foreground select-none"
+        className="pointer-events-none absolute top-1/2 right-0 size-3.5 -translate-y-1/2 text-muted-foreground select-none"
         aria-hidden="true"
         data-slot="native-select-icon"
       />
diff --git a/apps/v4/styles/radix-sera/ui/navigation-menu.tsx b/apps/v4/styles/radix-sera/ui/navigation-menu.tsx
index 4c309731de..75044eb902 100644
--- a/apps/v4/styles/radix-sera/ui/navigation-menu.tsx
+++ b/apps/v4/styles/radix-sera/ui/navigation-menu.tsx
@@ -128,7 +128,7 @@ function NavigationMenuLink({
     <NavigationMenuPrimitive.Link
       data-slot="navigation-menu-link"
       className={cn(
-        "flex items-center gap-1.5 rounded-none p-3 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none data-[active=true]:bg-muted/50 data-[active=true]:hover:bg-muted data-[active=true]:focus:bg-muted [&_svg:not([class*='size-'])]:size-4",
+        "flex items-center gap-1.5 rounded-none p-3 text-sm transition-all outline-none hover:bg-muted focus:bg-muted focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:outline-1 in-data-[slot=navigation-menu-content]:rounded-none data-[active=true]:bg-muted/50 data-[active=true]:hover:bg-muted data-[active=true]:focus:bg-muted [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/radix-sera/ui/select.tsx b/apps/v4/styles/radix-sera/ui/select.tsx
index 0b1ea6b5a2..7a145098b4 100644
--- a/apps/v4/styles/radix-sera/ui/select.tsx
+++ b/apps/v4/styles/radix-sera/ui/select.tsx
@@ -44,14 +44,14 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-1.5 rounded-none border border-transparent border-b-input bg-transparent px-0 py-2 text-sm whitespace-nowrap transition-[color,border-color] outline-none focus-visible:border-b-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive data-placeholder:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-b-destructive/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit items-center justify-between gap-1.5 rounded-none border border-transparent border-b-input bg-transparent px-0 py-2 text-sm whitespace-nowrap transition-[color,border-color] outline-none focus-visible:border-b-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-b-destructive data-placeholder:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-b-destructive/50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
     >
       {children}
       <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="pointer-events-none size-4 text-muted-foreground" />
+        <ChevronDownIcon className="pointer-events-none size-3.5 text-muted-foreground" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   )
@@ -103,7 +103,7 @@ function SelectLabel({
     <SelectPrimitive.Label
       data-slot="select-label"
       className={cn(
-        "px-3 py-2 text-[0.625rem] font-semibold tracking-wider text-foreground uppercase",
+        "px-3 py-2 text-[0.625rem] tracking-wider text-muted-foreground uppercase",
         className
       )}
       {...props}
@@ -120,7 +120,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-xs font-medium tracking-wider uppercase outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )}
       {...props}
@@ -159,7 +159,7 @@ function SelectScrollUpButton({
     <SelectPrimitive.ScrollUpButton
       data-slot="select-scroll-up-button"
       className={cn(
-        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
@@ -177,7 +177,7 @@ function SelectScrollDownButton({
     <SelectPrimitive.ScrollDownButton
       data-slot="select-scroll-down-button"
       className={cn(
-        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4",
+        "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/radix-sera/ui/sidebar.tsx b/apps/v4/styles/radix-sera/ui/sidebar.tsx
index 214d930a96..42dc6d4bfe 100644
--- a/apps/v4/styles/radix-sera/ui/sidebar.tsx
+++ b/apps/v4/styles/radix-sera/ui/sidebar.tsx
@@ -404,7 +404,7 @@ function SidebarGroupLabel({
       data-slot="sidebar-group-label"
       data-sidebar="group-label"
       className={cn(
-        "flex h-8 shrink-0 items-center rounded-none px-3 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "flex h-8 shrink-0 items-center rounded-none px-3 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-3.5 [&>svg]:shrink-0",
         className
       )}
       {...props}
@@ -424,7 +424,7 @@ function SidebarGroupAction({
       data-slot="sidebar-group-action"
       data-sidebar="group-action"
       className={cn(
-        "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-3.5 [&>svg]:shrink-0",
         className
       )}
       {...props}
@@ -556,7 +556,7 @@ function SidebarMenuAction({
       data-slot="sidebar-menu-action"
       data-sidebar="menu-action"
       className={cn(
-        "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        "absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-3.5 [&>svg]:shrink-0",
         showOnHover &&
           "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0",
         className
@@ -604,7 +604,7 @@ function SidebarMenuSkeleton({
     >
       {showIcon && (
         <Skeleton
-          className="size-4 rounded-none"
+          className="size-3.5 rounded-none"
           data-sidebar="menu-skeleton-icon"
         />
       )}
@@ -669,7 +669,7 @@ function SidebarMenuSubButton({
       data-size={size}
       data-active={isActive}
       className={cn(
-        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-none px-3 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
+        "flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-none px-3 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-3.5 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/radix-sera/ui/tabs.tsx b/apps/v4/styles/radix-sera/ui/tabs.tsx
index 0cb0d6ddc1..2176b7c9c7 100644
--- a/apps/v4/styles/radix-sera/ui/tabs.tsx
+++ b/apps/v4/styles/radix-sera/ui/tabs.tsx
@@ -63,7 +63,7 @@ function TabsTrigger({
     <TabsPrimitive.Trigger
       data-slot="tabs-trigger"
       className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-4 group-data-vertical/tabs:py-2 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start group-data-vertical/tabs:px-4 group-data-vertical/tabs:py-2 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
         "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
         "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
diff --git a/apps/v4/styles/radix-sera/ui/toggle.tsx b/apps/v4/styles/radix-sera/ui/toggle.tsx
index 1b13301b93..9134a5532a 100644
--- a/apps/v4/styles/radix-sera/ui/toggle.tsx
+++ b/apps/v4/styles/radix-sera/ui/toggle.tsx
@@ -7,7 +7,7 @@ import { Toggle as TogglePrimitive } from "radix-ui"
 import { cn } from "@/lib/utils"
 
 const toggleVariants = cva(
-  "group/toggle inline-flex items-center justify-center gap-1.5 rounded-none text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/toggle inline-flex items-center justify-center gap-1.5 rounded-none text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
   {
     variants: {
       variant: {